js倒计时刷新页面不受影响

最新推荐文章于 2023-03-14 19:33:42 发布

gqzydh

最新推荐文章于 2023-03-14 19:33:42 发布

阅读量1.6k

点赞数 1

分类专栏： wab前端实例文章标签：到计时 js

本文链接：https://blog.csdn.net/gqzydh/article/details/102797669

版权

实例同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

wab前端

8 篇文章 0 订阅

订阅专栏

JS倒计时（无视页面刷新）使用localStorage

<html>
<head>
<title>JS倒计时（无视页面刷新）使用localStorage</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 language="javascript">
 
$(function () {
  //点击发送验证码
    $('body').on('click', '#btnSend', function () {
          $('body').off('click', '#btnSend');
          LockButton('#btnSend', 60);
      })
       
    //读取localStorage
    var djsendtime = localStorage.getItem("djsendtime");
    if (djsendtime != undefined && !isNaN(djsendtime)) {  
        var now = new Date().getTime();  //当前时间戳
        var locksecends = parseInt((djsendtime - now) / 1000);
        if (locksecends <= 0) {
            localStorage.removeItem("djsendtime", null);
        } else {
            LockButton('#btnSend', locksecends);
        }
    }
  
})
 
// 按钮倒计时
var LockButton = function (btnObjId, locksecends) {
    //1.获取当前系统时间
    //2.获取 locksecends 后的系统时间
    //3.用 localStorage 保存到期时间
    //4.每次加载后获取 localStorage中保存的时间
    //5.用到期时间减去当前时间获取倒计时
    var djsendtime = localStorage.getItem("djsendtime")
    if (djsendtime == null || djsendtime == undefined || djsendtime == 'undefined' || djsendtime == 'null') {
        var now = new Date().getTime();  //当前时间戳
        var endtime = locksecends * 1000 + now;  //结束时间戳
        localStorage.setItem("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) {
            //倒计时结束清除 localStorage值
            localStorage.removeItem("djsendtime", null);
            $(btnObjId).removeClass('disabled').removeAttr('disabled').text('重新获取');
            $('body').on('click', btnObjId);
            clearInterval(timer);
        }
    }, 1000);
};
</script>
 
</html>

gqzydh

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
js倒计时刷新页面不受影响

JS倒计时（无视页面刷新）使用localStorage<html><head><title>JS倒计时（无视页面刷新）使用localStorage</title> <style>.disabled { background: #fff; color: #ccc; border: solid 0px;}...
复制链接

扫一扫