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>

javascript按钮通过cookie限制60s后才可以点击的更多相关文章

  1. angularjs+ionic注册页面表单验证（手机号、确认密码、60s后重发验证码）

    在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...

  2. Javascript中关于cookie的那些事儿

    Javascript-cookie 什么是cookie? 指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).简单点来说就是:浏览器缓存. cookie由什 ...

  3. 160428、JavaScript知识总结—cookie及其应用

    一.cookie基本介绍 cookie是document的对象.cookie可以使得JavaScript代码能够在用户的硬盘上持久地存储数据,并且能够获得以这种方式存储的数据.cookie还可以用于客 ...

  4. 浅谈JavaScript中的cookie

    什么是cookie?简单来说,cookie就是网站服务器存放在我们计算机上的一小段(一般大小不超过4KB)用来识别和记录用户的个人信息的文本.HTTP协议是一种没有“状态”的传输协议,也就是说,服务器 ...

  5. JavaScript学习08 Cookie对象

    JavaScript学习08 Cookie对象 JavaScript Cookie Cookie对象: Cookie是一种以文件的形式保存在客户端硬盘的Cookies文件夹中的用户数据信息(Cooki ...

  6. 学习笔记： JavaScript/JQuery 的cookie操作

    转自:http://blog.csdn.net/barryhappy/archive/2011/04/27/6367994.aspx cookie是网页存储到用户硬盘上的一小段信息.最常见的作用是判断 ...

  7. 代码: 两列图片瀑布流（一次后台取数据，图片懒加载。下拉后分批显示图片。图片高度未知，当图片onload后才显示容器）

    代码: 两列图片瀑布流(一次后台取数据,无ajax,图片懒加载.下拉后分批显示图片.图片高度未知,当图片onload后才显示容器) [思路]: 图片瀑布流,网上代码有多种实现方式,也有各类插件.没找到 ...

  8. JavaScript中的Cookie 和 Json的使用

    JavaScript中的Cookie 和 Json的使用 JSON JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.采用的是完全独立于编程语言的文本格式来存 ...

  9. 页面上有3个输入框：分别为max，min，num；三个按钮：分别为生成，排序，去重；在输入框输入三个数字后，先点击生成按钮，生成一个数组长度为num，值为max到min之间的随机整数点击排序，对当前数组进行排序，点击去重，对当前数组进行去重。 每次点击之后使结果显示在控制台

    <!DOCTYPE html> <html> <head> <!-- 页面上有3个输入框:分别为max,min,num:三个按钮:分别为生成,排序,去重: 在 ...

  10. WPF 点击Calendar后，需要点击两次按钮

    主面板上有一个Calendar控件,点击选择了日期后,如果点击确认按钮,需要点击两次.这个问题的解决方法如下:     private void calendar1_PreviewMouseUp(ob ...

随机推荐

  1. mysql和redis库存扣减和优化

    前言 大流量情况下的库存是老生常谈的问题了,在这里我整理一下mysql和redis应对扣除库存的方案,采用jmeter进行压测. JMETER设置 库存初始值50,线程数量1000个,1秒以内启动全部 ...

  2. SpringCloud学习 系列四、微服务中心 Eureka介绍及创建一个Eureka中心服务

    系列导航 SpringCloud学习 系列一. 前言-为什么要学习微服务 SpringCloud学习 系列二. 简介 SpringCloud学习 系列三. 创建一个没有使用springCloud的服务 ...

  3. 动态给div赋值高，使页面高度100%

    import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue' const boxRef = ref() const sea ...

  4. COM组件开发-关于在开发环境下COM组件的(来自 HRESULT 的异常:0x80080005 (CO_E_SERVER_EXEC_FAILURE)) 以及 在CLR语言下可能报错 未能加载文件或程序集“Interop.xxx 的问题

    1.关于在开发环境下COM组件的(来自 HRESULT 的异常:0x80080005 (CO_E_SERVER_EXEC_FAILURE)) 开发环境下,COM组件注册的文件 不一定是你自己现在程序调 ...

  5. P1004-DP【绿】

    这道题很有趣,暴搜的时间复杂度太过于凶残O(K*(2^n)^2)(K的意思是大常数),不过作为提高组T4,这道题数据范围太小了,感觉哪怕是离谱的暴搜也能过. 再加上一时半会没想好多项式时间复杂度的正解 ...

  6. Vue - 组件通信（父子单向传递、父子相互传递、祖孙隔代传递）

    父组件向子组件单向传递 父组件:引入子组件后,通过属性绑定的形式,将值传入子组件: ` ` 子组件:子组件通过props接收父组件传入的值; ` {{sonGetParam}} ` 子组件向父组件单向 ...

  7. C#设计模式14——模板方法的写法

    模板方法(Template Method)是一种设计模式,它定义了一个操作中的算法的骨架,将某些步骤推迟到子类中实现,从而使得子类可以在不改变算法骨架的情况下重新定义算法的某些步骤. 作用: 使用模板 ...

  8. Go 疑难杂症汇总

    1. revision v0.0.0: unknown revision v0.0.0 go get -u github.com/uudashr/gopkgs/cmd/gopkgs 报错: [root ...

  9. RL 基础 | 讲的很好的 TRPO 博客

    特意存档: 知乎 | 如何看懂TRPO里所有的数学推导细节? 感觉把 idea 讲的很清楚(虽然没有特别仔细看-

  10. JVM内存用量的再学习

    JVM内存用量的再学习 背景 最近解决一个SQLServer的问题耗时很久. 最终找到了一个看似合理的问题解释. 但是感觉不能只是总结于数据库方面 因为为了解决这个问题增加了很多监控措施. 所以想就这 ...