Ferris教程学习笔记:js示例3.9 倒计时时钟 

<!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 \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(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>

 

posted @ 2013-12-13 16:48  kaka100  阅读(343)  评论(0)    收藏  举报