JS倒计时（刷新页面不影响）的实现思路

最近在做一个项目，用到了点击按钮实现倒计时，这个用js来实现很简单。但是遇到了一个问题

  页面刷新后js重新加载导致 倒计时重新开始，或者直接初始化了

后来通过 cookie 保存来实现了js倒计时，关闭页面和强制刷新都不会停止

主要思路

  通过获取当前时间 与 倒计时停止时间 之间的时间间隔来确定倒计时的数值。

具体如下：

1.首次加载页面 点击开始  

   1) 获取当前时间  与要倒计时的时间相加获得要 停止计时的时间

   2) 用cookie保存这个停止计时的时候

   3) 通过js的setInterval  进行定时刷新时间

   4) 当倒计时结束后 清楚cookie中保存的结束时间

2.当第二次进入页面或刷新页面时

   1)首先判断cookie中时候有结束时间

    2)有取出 和 当前时间求差 如果 差值大于倒计时间隔时间 说明倒计时已结束需要重新点击 否则就将这个差值作为倒计时开始的数字

    3）没有需要重新点击开始倒计时

    闲话少说，上代码~~~~

<html>
<head>
<title>JS倒计时（无视刷新）</title>

<style>
.disabled {
    background: #fff;
    color: #ccc;
    border: solid 0px;
}
.disabled:hover {
     background:none;
      color: #ccc;
}
</style>
</head>
<body>

<input type="tel" placeholder="请输入手机号" name="Phone">
<a class="fasong" id="btnSend" style="cursor:pointer;">发送验证码</a>
</body>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script language="javascript">

$(function () {
  //点击发送验证码
    $('body').on('click', '#btnSend', function () {
          $('body').off('click', '#btnSend');
          LockButton('#btnSend', 60);
      }) 
	  
    //读取cookie
    if ($.cookie("djsendtime") != undefined && !isNaN($.cookie("djsendtime"))) {  //读取到了cookie值
        var djsendtime = $.cookie("djsendtime");
        var now = new Date().getTime();  //当前时间戳
        var locksecends = parseInt((djsendtime - now) / 1000);
        if (locksecends <= 0) {
            $.cookie("djsendtime", null);
        } else {
            LockButton('#btnSend', locksecends);
        }
    }
 
})

// 按钮倒计时
var LockButton = function (btnObjId, locksecends) {
    //1.获取当前系统时间
    //2.获取 locksecends 后的系统时间
    //3.用cookie保存到期时间
    //4.每次加载后获取cookie中保存的时间
    //5.用到期时间减去当前时间获取倒计时
    var djsendtime = $.cookie("djsendtime");
    if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
        var now = new Date().getTime();  //当前时间戳
        var endtime = locksecends * 1000 + now;  //结束时间戳
        $.cookie("djsendtime", endtime);  //将结束时间保存到cookie 
    }
    $(btnObjId).addClass('disabled').attr('disabled', 'disabled').text('(' + locksecends + ')秒后重新获取');
    $('body').off('click', '#btnSendSMS');
    var timer = setInterval(function () {
        locksecends--;
        $(btnObjId).text('(' + locksecends + ')秒后重新获取');
        if (locksecends <= 0) {
		//倒计时结束清除cookie值
            $.cookie("djsendtime", null);
            $(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
            $('body').on('click', btnObjId);
            clearInterval(timer);
        }
    }, 1000);
};
</script>

</html>

运行：　　

无论怎么刷新，倒计时都会继续不会重新开始

 

   

 

posted @ 2018-05-25 15:21  ★Angel★  阅读(11413)  评论(0)    收藏  举报