一般js倒计时用于一些抢购或其他类似活动场景,而这些对时效性要求非常高的应用,是不能容忍时间差存在的,此时倒计时就不能依赖于客户端时间了,如果依赖客户端,用户就可能会自行修改客户端的时间来扰乱我们正常程序的流程
为了避免这一问题,倒计时的时间我们在服务器来计算,然后返回到客户端,客户端只做减秒处理,下面直接上代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>活动倒计时</title>
</head>
<body>
<span></span>
</body>
<script src="./jquery-3.2.1.min.js"></script>
<script>
var time= 5;//从服务器获取总倒计时长秒数
var day =Math.floor(time/(3600*24));
var hour =Math.floor((time-3600*24*day)/3600);
var minute = Math.floor((time-3600*24*day-hour*3600)/60);
var seconds =time-3600*24*day-hour*3600-minute*60;
$('.time').html('距离活动开始还有:'+day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒");
var t = setInterval(function() {
time--;
var day =Math.floor(time/(3600*24));
var hour =Math.floor((time-3600*24*day)/3600);
var minute = Math.floor((time-3600*24*day-hour*3600)/60);
var seconds =time-3600*24*day-hour*3600-minute*60;
$('.time').html('距离活动开始还有:'+day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒");
//console.log(day + "天" + hour + "小时" + minute + "分钟" + seconds + "秒"+'time:'+time);
if (time == 0) {
$('.time').html('活动开始');
clearInterval(t);
}
}, 1000);
</script>
</html>