js/jq实现倒计时教程(无视页面刷新)

野牛哥
2021-08-27 / 0 评论 / 26 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2021年08月27日,已超过103天没有更新,若内容或图片失效,请留言反馈。

js/jq实现倒计时教程(无视页面刷新)

在日常生活中,倒计时几乎随处可见,比如在付款时就有个倒计时,线上答题或者做调研时都会有个倒计时,那么接下来讲讲如何实现倒计时的.

原理

主要使用浏览器时间和缓存进行一个时间差的计时.

示例代码
<html>
<head>
    <title>凌霄阁---js/jq倒计时教程(无视页面刷新)</title>

    <style>
        a{cursor: pointer;}
        .disabled {
            background: #fff;
            color: #ccc;
            border: solid 0px;
            pointer-events: none;
        }
    </style>
</head>

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

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

    $(function () {
        //点击发送验证码
        $('#btnSend').click(function(){
            // $.ajax({...})这里演示忽略不写
            LockButton($(this), 10);
        })

        //读取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').text('重新获取(' + locksecends + ')');
        var timer = setInterval(function () {
            locksecends--;
            $(btnObjId).text('重新获取(' + locksecends + ')');
            if (locksecends <= 0) {
                //倒计时结束清除 localStorage值
                localStorage.removeItem("djsendtime", null);
                $(btnObjId).removeClass('disabled').text('重新获取');
                clearInterval(timer);
            }
        }, 1000);
    };
</script>
</html>

这里使用的是localStorage,也可以使用cookie,功能实现就好,赶紧动手实现吧!

本文共 266 个字数,平均阅读时长 ≈ 1分钟
1

打赏

评论 (0)

取消