Js写的一个倒计时效果实例

Posted 看起来没睡醒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Js写的一个倒计时效果实例相关的知识，希望对你有一定的参考价值。

我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果，就是多少秒之后注册这个按钮才可以点击，其目的就是强迫你去看他的注册注意事项，这是一个很实用的效果；另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果，这种倒计时效果是如何实现的呢？下面我们就用Js来实现一个倒计时效果，具体代码：

  1. <html> 
  2. <head> 
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  4. <title>Js实现倒计时效果</title> 
  5. <script language="javascript"> 
  6. var timeLeft = 90 * 60 * 1000;//这里设定的时间是90分钟
  7. function countTime(){ 
  8.     if(timeLeft == 0){//这里就是时间到了之后应该执行的动作了，这里只是弹了一个警告框 
  9.         alert("时间到"); 
  10.         return; 
  11.     } 
  12.     var startMinutes = parseInt(timeLeft / (60 * 1000), 10); 
  13.     var startSec = parseInt((timeLeft - startMinutes * 60 * 1000)/1000); 
  14.     document.getElementById(‘show‘).innerHTML = "剩余时间：" + startMinutes + "分钟" + startSec + "秒"; 
  15.     timeLefttimeLeft = timeLeft - 1000; 
  16.     setTimeout(‘countTime()‘,1000); 
  17. } 
  18. </script> 
  19. </head> 
  20.  
  21. <body onload="countTime()"> 
  22. <div id="show"></div> 
  23. </body> 
  24. </html> 

以上是关于Js写的一个倒计时效果实例的主要内容，如果未能解决你的问题，请参考以下文章

[js高手之路] html5 canvas教程 - 制作一个数码倒计时效果

使用setTimeout()实现倒计时效果代码实例

求php倒计时代码

js实现60秒倒计时效果（使用了jQuery）

js 倒计时效果

原生js处理倒计时小实例