活动倒计时

.daojs{ position:fixed; top:0; text-align:center; padding:10px 0; font-size:20px; color:#fff; width:100%; max-width:750px; background:rgba(0,0,0,0.8); filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#8F000000,endcolorstr=#8F000000); z-index:999;}
.daojs .time{ font-size:24px; color:#FF0;}
<div class="daojs">活动倒计时:<span class="time" id="daojishi"></span></div>
//倒计时
var timer = setInterval("leftTimer()",1000); 
$(function(){ leftTimer(); }) function leftTimer(){ var endTime = new Date(2017,9-1,30,0,0,0);//2017年9月30日00:00:00 var nowTime = new Date(); var leftTime = endTime.getTime() - nowTime.getTime(); //计算剩余的毫秒数 if(leftTime <= 0){ document.getElementById("daojishi").innerHTML = "活动已结束!";
     clearInterval(timer); }
else{ var days = Math.floor(leftTime / 1000 / 60 / 60 / 24); //计算剩余的天数 var hours = Math.floor(leftTime / 1000 / 60 / 60 % 24); //计算剩余的小时 var minutes = Math.floor(leftTime / 1000 / 60 % 60);//计算剩余的分钟 var seconds = Math.floor(leftTime / 1000 % 60);//计算剩余的秒数 hours = checkTime(hours + days * 24); minutes = checkTime(minutes); seconds = checkTime(seconds); document.getElementById("daojishi").innerHTML = hours+"小时" + minutes+"分"+seconds+"秒"; } } function checkTime(i){ //将0-9的数字前面加上0,例1变为01 if(i<10) { i = "0" + i; } return i; }

以上获取的是本地时间,如果用户修改了本地时间,那么显示倒计时就不正确了。可以获取服务器时间来解决这个问题,但是每一秒都请求服务器获取时间压力太大。

所以如果拿服务器时间倒计时最好倒计时到分钟,每分钟请求一次服务器。

具体实现:修改上面代码中的 nowTime,定时改为1分钟

var nowTime = new Date($.ajax({async: false}).getResponseHeader("Date"))
setInterval("leftTimer()",60000); 

 

posted @ 2017-09-28 16:31  阿龙阿  阅读(294)  评论(0编辑  收藏  举报