<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>倒计时时钟</title> <style type="text/css"> body,div{margin:0;padding:0;} body{color:#fff;font:16px/1.5 5fae8f6f96c59ed1;} #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(09/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> </head> <body> <div id="countdown"> <span>00</span>分钟<span>5</span>秒 <input class="" value="" type="button" /> </div> <script type="text/javascript"> window.onload = function(){ //思路: //通过将分钟秒转换成秒数来计算倒计时 // //------------------------------------------------ var countdown = document.getElementById("countdown"); var input = countdown.getElementsByTagName("input")[0]; var timer = null; input.onclick = function(){ this.className == "" ? (timer = setInterval(updateTime,1000),updateTime()):(clearInterval(timer)); this.className = this.className == "" ? "cancel" : ""; } function updateTime(){ var aSpan = countdown.getElementsByTagName("span"); //通过将分钟秒转换成秒数来计算倒计时 var oRemain = aSpan[0].innerHTML.replace(/^0/,"")*60+parseInt(aSpan[1].innerHTML.replace(/^0/,"")); //分钟*60+秒 = 剩于的总秒数 if(oRemain <= 0){ clearInterval(timer); return; } //否则减一秒 oRemain--; //将总秒数转提取出分钟 aSpan[0].innerHTML = format(parseInt(oRemain / 60)); oRemain %= 60; //秒 aSpan[1].innerHTML = format(parseInt(oRemain)); } function format(a) { return a.toString().replace(/^(d)$/,'0$1') } }; </script> </body> </html>