欢迎您访问我的笔记本站旨在于记录一些平时工作中遇到的一些问题和解决方法,方便查阅,部分内容来源于网络,如有侵权请联系我删除
  • 微信微信
您现在的位置是:首页 > JQuery/Js

js倒计时-[原创]

日期:2018-11-05 16:20:45 作者:tanyi 来源:我的笔记 浏览:1178 次
一般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>


提交评论
评论列表