欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS实现的倒计时效果实例(2则实例)_javascript技巧

程序员文章站 2022-04-10 23:08:30
...
本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考,具体如下:

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

html页面:

 
 倒计时

剩余时间为:

timer.js:

function timer() 
{
 var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数
 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
 var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
 var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
 dd = checkTime(dd);
 hh = checkTime(hh);
 mm = checkTime(mm);
 ss = checkTime(ss);
 document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
 setInterval("timer()",1000);
}
function checkTime(i)
{
  if (i 

运行效果截图如下:

JS实现的倒计时效果实例(2则实例)_javascript技巧

再来看看另一个JS倒计时效果:



倒计时js代码
00天 00时 00分 00秒

运行效果截图如下:

JS实现的倒计时效果实例(2则实例)_javascript技巧

读者可以按照自己的喜好选择一款倒计时代码使用。

希望本文所述对大家JavaScript程序设计有所帮助。