简单实现JS倒计时效果

248 阅读 0 评论 164 点赞

我是靠谱客的博主美满大白，最近开发中收集的这篇文章主要介绍简单实现JS倒计时效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

本文实例为大家分享了JS倒计时效果的具体代码，供大家参考，具体内容如下

Index.html

<!DOCTYPE html>
<html>
 <head> 
 <meta charset="utf-8" /> 
 <title>倒计时</title> 
 <script>
function toTwo(n)
{
 if(n>9)
 {
  return ''+n; 
 }
 else
 {
  return '0'+n; 
 }
}
window.onload=function(){

 var oBox=document.getElementById('box');
 var aImg=oBox.getElementsByTagName('img');

 function time()
 {
  var enddate=new Date('2016/12/25 00:00:00');
  var mydate=new Date(); 
  var str='';
  var t=enddate.getTime()-mydate.getTime();
  str=toTwo(Math.floor(t/1000/60/60/24))+toTwo(Math.floor(t/1000/60/60%24))+toTwo(Math.floor(t/1000/60%60))+toTwo(Math.floor(t/1000%60));

   for(var i=0;i<aImg.length;i++)
   {
   aImg[i].src='images/'+str[i]+'.png';  
   }
 }

 time();
 setInterval(time,1000);

};
</script> 
 <style>
#box { width:1000px;
  height:200px;
  font-size:14px;
  line-height:100px;
  margin:auto;
  }

#box img{ width:30px;
   height:60px;
   }
</style> 
 </head> 
 <body> 
 <div id="box"> 
 <img src="images/0.png" /> 
 <img src="images/0.png" /> 天: 
 <img src="images/0.png" /> 
 <img src="images/0.png" /> 时: 
 <img src="images/0.png" /> 
 <img src="images/0.png" /> 分: 
 <img src="images/0.png" /> 
 <img src="images/0.png" /> 秒
 </div> 
 </body>
</html>

运行结果如图：