当前位置：首页 > 资讯 > 技术文档

简单实现JS倒计时效果

时间：2020-11-07 05:27 编辑：来源：阅读：
扫一扫，手机访问

摘要：简单实现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>

运行结果如图： [img]http://files.jb51.net/file_images/article/201612/2016122392316493.jpg?2016112392324[/img] 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程素材网。

全部评论(0)

上一篇：nodejs实用示例缩址还原
下一篇：jsp跳转getRequestDispatcher()和sendRedirect()的区别

资讯排行榜
更多>>