时间:2021-05-26
本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考,具体如下:
我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果;另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码:
html页面:
<html> <head> <title>倒计时</title> <!--以下为css样式--> <style type= "text/css"> .daojishi h2 { font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; font-size:14px; margin-bottom:5px; color:#151515; } .daojishi #timer { font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; font-size:14px; color:#151515; font-weight:bold; } </style> <script type = "text/javascript" src = "timer.js"> </script> </head> <body onload = "timer()"> <div class = "daojishi"> <h2>剩余时间为:</h2> <div id = "timer"> </div> </div> </body> </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 < 10) { i = "0" + i; } return i;}运行效果截图如下:
再来看看另一个JS倒计时效果:
<!doctype html><html><head> <meta charset="utf-8"> <title>倒计时js代码</title></head><body><DIV id="CountMsg" class="HotDate"> <span id="t_d">00天</span> <span id="t_h">00时</span> <span id="t_m">00分</span> <span id="t_s">00秒</span></DIV><script type="text/javascript"> function getRTime(){ var EndTime= new Date('2016/05/1 10:00:00'); //截止时间 var NowTime = new Date(); var t =EndTime.getTime() - NowTime.getTime(); /*var d=Math.floor(t/1000/60/60/24); t-=d*(1000*60*60*24); var h=Math.floor(t/1000/60/60); t-=h*60*60*1000; var m=Math.floor(t/1000/60); t-=m*60*1000; var s=Math.floor(t/1000);*/ var d=Math.floor(t/1000/60/60/24); var h=Math.floor(t/1000/60/60%24); var m=Math.floor(t/1000/60%60); var s=Math.floor(t/1000%60); document.getElementById("t_d").innerHTML = d + "天"; document.getElementById("t_h").innerHTML = h + "时"; document.getElementById("t_m").innerHTML = m + "分"; document.getElementById("t_s").innerHTML = s + "秒"; } setInterval(getRTime,1000); </script></body></html>运行效果截图如下:
读者可以按照自己的喜好选择一款倒计时代码使用。
希望本文所述对大家JavaScript程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
倒计时效果有着广泛的应用,比如奥运会倒计时、高考倒计时和放假倒计时等,本章节分享一个比较美观且实用的倒计时效果。代码实例如下:$(function(){coun
本文实例为大家分享了两种倒计时效果,供大家参考,具体内容如下效果图:1.倒计时效果倒计时*{margin:0;padding:0;}.dtime{margin:
本文实例讲述了javascript电商网站抢购倒计时效果实现代码。分享给大家供大家参考。具体如下:运行效果截图如下:团购——限时抢functionFreshTi
本文实例讲述了JQuery实现的按钮倒计时效果。分享给大家供大家参考,具体如下:一个实现了在按钮上显示倒计时,倒计时完毕自动将按钮设置为不可用的效果,具体代码如
本文实例为大家分享了js倒计时效果的具体代码,供大家参考,具体内容如下Index.html倒计时.colockbox{width:500px;height:20