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倒计时效果:
倒计时js代码 00天 00时 00分 00秒
运行效果截图如下:
读者可以按照自己的喜好选择一款倒计时代码使用。
希望本文所述对大家JavaScript程序设计有所帮助。
上一篇: php中文智能分词
推荐阅读
-
javascript实现3D变换的立体圆圈实例_javascript技巧
-
js实现同一页面多个运动效果的方法_javascript技巧
-
JavaScript实现的类字典插入或更新方法实例_javascript技巧
-
使用原生javascript实现分页效果的代码实例
-
js 实现倒计时效果的实例代码分享
-
js实现点小图看大图效果的思路及示例代码_javascript技巧
-
JavaScript实现可拖拽的拖动层Div实例_javascript技巧
-
字中字效果的实现【html5实例】_html5教程技巧
-
js实现的四级左侧网站分类菜单实例_javascript技巧
-
基于JS实现PHP的sprintf函数实例_javascript技巧