Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要教大家如何简单实现 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$))+toTwo(Math.floor(t/1000/60`))+toTwo(Math.floor(t/1000`));
- 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>
运行结果如图:
来源: http://www.phperz.com/article/17/0701/329240.html