本文实例讲述了JS实现的倒计时效果。分享给大家供大家参考,具体如下:
我们经常会看到某些网站在注册的时候喜欢搞个按钮倒计时的效果,就是多少秒之后注册这个按钮才可以点击,其目的就是强迫你去看他的注册注意事项,这是一个很实用的效果;另外当我们进行在线考试的时候也必定会碰到答题倒计时的效果,这种倒计时效果是如何实现的呢?下面我们就用Js来实现一个倒计时效果,具体代码:
html页面:
倒计时.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;
}
剩余时间为:
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倒计时效果:
倒计时js代码00天
00时
00分
00秒
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);
运行效果截图如下:
读者可以按照自己的喜好选择一款倒计时代码使用。
希望本文所述对大家JavaScript程序设计有所帮助。