本文实例为大家分享了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>

运行结果如图:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持新人网。

0 条评论

还没有人评论。
您需要登录后才可以回复。登录 | 立即注册