本文实例讲述了JS实现的网页倒计时数字时钟效果。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html ns=\"http://www.w3.org/1999/xhtml\">
<head>
< http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
< > 实现的倒计时时钟</ >
<style>
body,div{margin:0;padding:0;}
body{color:#fff;font:16px/1.5 \\5fae\\8f6f\\96c5\\9ed1;}
#countdown{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
input{border:0;width:283px;height:50px;cursor:pointer;margin-top:20px;background:url(http://www.jb51.net/jscss/demoimg/201210/btn-1.png) no-repeat;}
input.cancel{background-position:0 -50px;}
span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}
</style>
< >
window. = function ()
{
var oCountDown = document.getElementById(\"countdown\");
var aInput = oCountDown.getElementsByTagName(\"input\")[0];
var timer = null;
aInput. = function ()
{
this.className == \"\" ? (timer = setInterval(updateTime, 1000), updateTime()) : (clearInterval(timer));
this.className = this.className == \'\' ? \"cancel\" : \'\';
};
function format(a)
{
return a.toString().replace(/^(\\d)$/,\'0$1\')
}
function updateTime ()
{
var aSpan = oCountDown.getElementsByTagName(\"span\");
var oRemain = aSpan[0].innerHTML.replace(/^0/,\'\') * 60 + parseInt(aSpan[1].innerHTML.replace(/^0/,\'\'));
if(oRemain <= 0)
{
clearInterval(timer);
return
}
oRemain--;
aSpan[0].innerHTML = format(parseInt(oRemain / 60));
oRemain %= 60;
aSpan[1].innerHTML = format(parseInt(oRemain));
}
}
</ >
</head>
<body>
<div id=\"countdown\">
<span>01</span>分钟<span>40</span>秒
<input type=\"button\" value=\"\" />
</div>码农教程 www.manongjc.com 代码特效
</body>
</html> 继续阅读与本文标签相同的文章
-
微软建议企业客户卸载KB4520062累积更新
2026-05-14栏目： 教程
-
他让我国芯片研究停滞13年，还骗走11亿研发资金，现状如何？
2026-05-14栏目： 教程
-
健乐教学机器人可开展的教学实训内容
2026-05-14栏目： 教程
-
5G套餐曝光遭“吐槽”，iphone11受追捧，导致苹果11销量比较高
2026-05-14栏目： 教程
-
为什么修电脑的叫自己不要杀毒和清理垃圾？
2026-05-14栏目： 教程