JS实现的倒计时效果实例(2则实例)_javascript技巧
程序员文章站
2022-04-08 22:08:44
...
本文实例讲述了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倒计时效果:
倒计时js代码 00天 00时 00分 00秒
运行效果截图如下:
读者可以按照自己的喜好选择一款倒计时代码使用。
希望本文所述对大家JavaScript程序设计有所帮助。