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 使用 trim去不掉空格 解决

    使用mysql8.0时 发现 有几个空字符串怎么也过滤不掉,使用 is not null.trim()<>''.length()>=1都不行,最后查了一些资料说 trim只能去除半角 ...

  2. 一、java发送http的各类请求

    导航 一.java发送http的各类请求 二.java发送https的各类请求 java开发中需要调用其他服务的对外提供的http请求可以参考如下代码: 注:调用的主类比较简单就不写了. pom.xm ...

  3. 【内核】深入分析内核panic(三)--内核错误处理流程

    1 内核错误处理方式 当内核出现致命错误时,只要cpu还能正常运行,那么最重要的就是向用户输出详细的错误信息,以及保存问题出现时的错误现场.以上致命错误可包含以下两种类型: (1)硬件能检测到的错误, ...

  4. vue+elementUI+WebSocket接收后台实时消息推送

    vue+elementUI+WebSocket接收后台实时消息推送 https://blog.csdn.net/weixin_40888956/article/details/105971432?ut ...

  5. 编写Java代码时应该避免的6个坑

    通常情况下,我们都希望我们的代码是高效和兼容的,但是实际情况下代码中常常含有一些隐藏的坑,只有等出现异常时我们才会去解决它.本文是一篇比较简短的文章,列出了开发人员在编写 Java 程序时常犯的错误, ...

  6. sipp3.6带媒体测试方案

    概述 SIP压测工具sipp,免费,开源,功能足够强大,配置灵活,优点多. 本文档介绍sipp工具如何带媒体测试,并介绍如何制作可用的媒体文件(G729和PCMA). 环境 centos7.9 fre ...

  7. AHB 设计要点

    Hreadyout 每个slave回复hreadyout通过mux给到master master会将hreadyin信号给到每个slave hreadyout开始的时候都为1,如果是为0,会出现问题, ...

  8. 配置Maven项目的pom.xml时遇到input contained no data问题

    1.问题 2.解决 我发现每次当我修改一些部分之后,就会遇到这个问题 我遵循了他的建议重新排列标记属性,然后重新加载就解决了报错 个人怀疑是修改后并没有识别之类的? 最终原因:是我在Maven项目中的 ...

  9. 改变vs私有变量的命名规范

    vs默认情况下,private 变量是不带下划线开头的,可以通过设置命名规范,增加下划线开头规则. 点击菜单:[工具]->[选项]->[文本编辑器]->[c#]->[代码样式] ...

  10. mysql-数值函数-取整-保留小数位-求余数