需求
最近由于页面需要,做一个倒计时的功能,具体意思就是当前时间到指定时间之间的时间段以倒计时的方式展示
展示效果

涉及方法
- getTime();
 - innerHTML;
 - Math.floor();
 - setTimeout(函数,time);
 
代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS倒计时</title>
</head>
<body><div id="remainDays"></div><script type="text/javascript" >
window.onload=countdown;
function countdown(){//获取客户端时间var today=new Date();//获取服务器当前时间 var today=new Date($.ajax({type:"HEAD",async:false,cache:false}).getResponseHeader("Date"));//当前距离1970年的毫秒数var oldTime = today.getTime();//设置截止时间,比如此时设置的是2099/1/1/00:00:00,此处可做修改var newDate = new Date(2099,0,1,0,0,0); //截止时间距离1970年的毫秒数var newTime = newDate.getTime();//截止时间距离现在的秒数var second = Math.floor((newTime - oldTime) / 1000);//设置remainSecond的目的是:如果倒计时结束该执行的方法或事件var remainSecond = second;//86400代表的是天;一天有24*60*60=86400秒 ;var day = Math.floor(second / 86400);second %= 86400;//余数代表剩下的秒数;var hour = Math.floor(second / 3600);//3600代表小时;second %= 3600; //余数代表 剩下的秒数;var minute = Math.floor(second / 60);second %= 60;var str = formatType(day) + '<span class="time">天</span>'+ formatType(hour) + '<span class="time">小时</span>'+ formatType(minute) + '<span class="time">分钟</span>'+ formatType(second) + '<span class="time">秒</span>';if(remainSecond >0){document.getElementById("remainDays").innerHTML=("倒计时:<font color=red>"+str+"</font>");}else{//设置你的事件或者函数}//500的目的是防止漏掉执行setTimeout(countdown,500);}
//设置显示格式,小于10的填0
function formatType(n) {return n >= 0 && n < 10 ? '0' + n : '' + n;}
</script>
</body>
</html>
 
在线运行效果请点此处

















