javascript按钮通过cookie限制60s后才可以点击

javascript按钮通过cookie限制60s后才可以点击

1️⃣ 首先创建一个html页面，放入一个按钮

 

2️⃣ 设置点击按钮的触发函数

一般当点击按钮都会有一些业务需要，在需求结束后，触发saveCookie的方法

 

3️⃣ saveCookie方法

当点击查询按钮之后，触发saveCooike方法，按钮倒计时需要一个结束时间，去给他做一个秒数的时间差

 

 

4️⃣监听cookie

当cookie存入浏览器中，我们需要不停的去获取cookie的值，根据cookie的值，去触发按钮倒计时的方法，而且这个方法要在页面一开始就执行

不停的去监控cookie的值的变化，一旦cookie里面有值，说明点击了查询按钮，说明我们要该进入倒计时方法了

 

 

 

5️⃣ 当监听到页面cookie里面的endtime有值了，可以开始进入setTime()倒计时方法了

 

 到此，页面按钮的倒计时方法就结束了，最后，效果图如下

6️⃣效果图

 点击查询按钮进入倒计时

 刷新页面倒计时不会停止，因为结束时间存在cookie里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript按钮通过cookie限制60s后才可以点击</title>
</head>
<body>
<div id="test">
    <table id="test_table">
        <td>
            <input id="testButton" type="button" name="search"
                   style="letter-spacing:4px" value="查询" onclick="getZLDT()">
        </td>
    </table>
</div>
<script type="text/javascript"></script>
<script src="../lib/easyui/2.3/js/jquery-1.6.min.js"></script>
<script src="../lib/jqueryui/external/jquery.cookie.js"></script>
<SCRIPT language="javascript">

    // 页面已进入就执行里面的方法
    $(document).ready(function () {
        // 监听cookie的变化
        setInterval("watchCookie()", 100);


    });

    function watchCookie() {
        let endTime = $.cookie("endTime");
        if (endTime !== undefined && endTime !== "null") {
            setTime(endTime);
        }

    }

    // 定义按钮函数
    function getZLDT() {
        /**
         * 这部分地方一般是点击按钮查询数据库的逻辑，这里不探讨，只实现功能
         */
        // 定义保存cookie的方法
        saveCookie();
    }

    function saveCookie() {
        // 获取当前时间
        const now = new Date().getTime();
        // 获取60s之后倒计时结束的时间
        const endTime = 60 * 1000 + now;
        // 将结束时间存入cookie中
        $.cookie("endTime", endTime);
    }

    // 倒计时方法
    function setTime(a) {
        if (a !== undefined && a !== "null") {
            const now = new Date().getTime();
            // 3.计算秒数
            const time = (a - now) / 1000;
            const times = parseInt(time);
            // 如果倒计时走完，将按钮变为可选取，并且将cookie的值置为null
            if (times <= 0) {
                document.getElementById('testButton').disabled = false;
                // 倒计时完成从xx秒后再次导入变为导入
                document.getElementById('testButton').value = "查询";
                $.cookie("endTime", "null");
            } else {
                // 禁用按钮并且将按钮内容改变
                document.getElementById('testButton').disabled = true;
                document.getElementById('testButton').value = times + "秒后再次点击";
            }
        }
    }


</SCRIPT>
</body>
</html>

 

posted @ 2023-08-01 17:42  $YX$  阅读(111)  评论(0)  编辑  收藏  举报