이 기사에서는 JS가 구현 한 웹 페이지 카운트 다운의 디지털 시계 효과에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> javaScript </title>에 의해 구현 된 카운트 다운 클럭
<스타일>
바디, div {마진 : 0; 패딩 : 0;}
바디 {색상 : #ffff; font : 16px/1.5/5fae/8f6f/96c5/9ed1;}
#countdown {너비 : 300px; 텍스트-정렬 : 중심; 배경 :#1a1a1a; 마진 : 10px 자동; 패딩 : 20px 0;}
입력 {portle : 0; width : 283px; 높이 : 50px; 커서 : 포인터; 마진-탑 : 20px; 배경 : URL (// www.vevb.com/jscss/demoimg/201210/btn-1.png) no-Repeat;}
input.cancel {배경 위치 : 0 -50px;}
span {color :#000; 너비 : 80px; 선-높이 : 2; 배경 : #fbfbfb; 테두리 : 2px 솔리드#b4b4b4; 마진 : 0 10px; 패딩 : 0 10px;}
</스타일>
<cript>
Window.onload = function ()
{
var ocountdown = document.getElementById ( "countdown");
var ainput = ocountdown.getElementsByTagName ( "input") [0];
var timer = null;
ainput.onclick = function ()
{
this.classname == ""? (timer = setInterVal (updateTime, 1000), updateTime ()) : (clearInterVal (timer));
this.classname = this.classname == ''? "취소" : '';
};
함수 형식 (a)
{
return A.ToString (). 교체 (/^(/d) $/, '0 $ 1')
}
함수 updateTime ()
{
var aspan = ocountdown.getElementsByTagName ( "span");
var oremain = aspan [0] .innerhtml.replace (/^0/, '') * 60 + parseint (aspan [1] .innerhtml.replace (/^0/, '');
if (oremain <= 0)
{
ClearInterval (타이머);
반품
}
오레 메인-;
Aspan [0] .innerhtml = 형식 (parseint (Oremain / 60));
오레 메인 %= 60;
Aspan [1] .innerhtml = 형식 (parseint (oremain));
}
}
</스크립트>
</head>
<body>
<div id = "countdown">
<span> 01 </span> min <span 40 </span> 초
<입력 유형 = "버튼"value = "" />
</div> wulin.com www.vevb.com 코드 특수 효과
</body>
</html>
이 기사가 모든 사람의 JavaScript 프로그래밍에 도움이되기를 바랍니다.