设置属性 disabled 可以限制交互，单击按钮时添加disabled=“disabled”属性，再为按钮添加定时器，一定时间后删除定时器和disabled属性

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <button id='but'> 发送 </button>

     <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>

     <script>

         $(function() {

             $('#but').click(function() {

                 $(this).attr("disabled", "disabled");

                 var id = 10;

                 //定时执行

                 var timeing = setInterval(function() {

                     id = id - 1;

                     $('#but').html(id + 's');

                 }, 1000);

                 //延迟执行

                 window.setTimeout(function() {

                     //结束定时,恢复按钮可用

                     clearInterval(timeing);

                     $('#but').html('发送').removeAttr("disabled");

                 }, 10000);

             });

         });

     </script>

 </body>

 </html>

或者用DOM

     <script>

         var but = document.getElementById('but');

         but.addEventListener('click', function() {

             var id = 10;

             var attr = document.createAttribute("disabled");

             attr.nodeValue = "disabled";

             //设置节点属性

             but.attributes.setNamedItem(attr);

             var timeing = setInterval(function() {

                 id = id - 1;

                 but.innerHTML = id + 's';

             }, 1000);

             window.setTimeout(function() {

                 clearInterval(timeing);

                 but.innerHTML = '发送';

                 //移除节点属性

                 but.attributes.removeNamedItem('disabled');

             }, 10000);

         });

     </script>

js限制按钮每隔一段时间才能再次点击的更多相关文章

  1. 纯JS实现鼠标每隔一段时间才能让页面再次滚动

    这里没有用到浏览器的兼容性写法,只是提供思路(这里使用的是Google浏览器的方法) javascript代码部分: //获取html元素var oHtml =document.documentEle ...

  2. js setInterval每隔一段时间执行一次

    js setInterval每隔一段时间执行一次setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearI ...

  3. flask中使用ajax 处理前端请求，每隔一段时间请求不通的接口，结果展示同一页面

    需求: flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面 用到 setTimeout方法,setTimeout(function(){},1000):setTime ...

  4. flask中使用ajax 处理前端请求，每隔一段时间请求一次

    需求: flask中使用ajax 处理前端请求,每隔一段时间请求一次,并展示在页面 使用 setInterval(function(){},1000)方法 结果展示: html:(test.html) ...

  5. C#实现每隔一段时间执行代码（多线程）

    总结以下三种方法,实现c#每隔一段时间执行代码: 方法一:调用线程执行方法,在方法中实现死循环,每个循环Sleep设定时间: 方法二:使用System.Timers.Timer类: 方法三:使用Sys ...

  6. 隔一段时间应用就会挂掉（进程在，但停止响应，也无log输出），必须重启tomcat

    此处是转载的  是给自己做的备注 问题:隔一段时间应用就会挂掉(进程在,但停止响应,也无log输出),必须重启tomcat 原因查找:由于tomcat自身log中并无错误产生,磁盘空间足够,读写也正常 ...

  7. logback 指定每隔一段时间创建一个日志文件

    我使用的logback版本是1.2.3 目前logback支持根据时间来配置产生日志文件,但是只支持每周,每天,每个小时,每分钟等创建一个文件,配置如下: <appender name=&quo ...

  8. TLS 改变密码标准协议(Change Cipher Spec Protocol) 就是加密传输中每隔一段时间必须改变其加解密参数的协议

    SSL修改密文协议的设计目的是为了保障SSL传输过程的安全性,因为SSL协议要求客户端或服务器端每隔一段时间必须改变其加解密参数.当某一方要改变其加解密参数时,就发送一个简单的消息通知对方下一个要传送 ...

  9. python每隔一段时间做一个事情

    #!/usr/bin/env python #coding:utf8 #Author:lsp #Date:下午2:17:54 #Version:0.1 #Function: 每隔一段时间做一个事情 f ...

随机推荐

  1. 2020牛客寒假算法基础集训营4 D：子段异或

    D : 子段异或 考察点 : 位运算,前缀和,异或的性质和应用 坑点 : 0 - L 的异或值是 0 的话也是一个区间 相同的值可能有多个,那么这时候区间就会有多个(x * (x + 1) / 2) ...

  2. VFP调用API来控制USB摄像头，实现拍照或录像

    *--前提:VFP7.0以上;Windows 2K及以上*--控件:AVICAP32.DLL *--定义:一般放到主程序或表单(集)的Load事件中Public WM_CAP_DRIVER_DISCO ...

  3. crul 命令访问公网 dns解析错误 程序报错

    今天机房几台服务器都无法访问公网接口,原因是——解析公网域名出错,具体情况如下 ping  公网ip或者域名  都没有问题 curl 公网域名 出错 curl -4  访问公网域名没有问题 综合分析 ...

  4. 如何在命令行添加换行符到git commit -m "xxx"

    需求来源: 需要将自动识别的组件信息.更新信息.任务跟踪单号.下载链接等信息自动提交并推送至gerrit, 然后作为触发条件启动另一个协作业务流程. 方法1:单引号开放方法 git commit -m ...

  5. 用C语言实现汉诺塔自动递归演示程序

    用C语言实现汉诺塔自动递归演示程序 程序实现效果 1.变界面大小依照输入递归数改变. 2.汉诺塔自动移动演示. 3.采用gotoxy实现流畅刷新. 4.保留文字显示递归流程 程序展示及实现 githu ...

  6. C# NewtonJson Serialize and deserialize

    using System; using System.Collections.Generic; using System.Diagnostics; using System.IO; using Sys ...

  7. .NET CORE应用程序启动

    ASP.NET Core 应用是在其 Main 方法中创建 Web 服务器的控制台应用: Main 方法调用 WebHost.CreateDefaultBuilder,通过生成器模式来创建web主机. ...

  8. C++中的public、protected和private

    访问权限控制 一个类的public的成员变量.成员函数,可以通过类的实例变量进行访问. 一个类的protected的成员变量.成员函数,无法通过类的实例变量进行访问,但是可以通过类的友元函数.友元类进 ...

  9. 试题 基础练习 Huffuman树

    试题 基础练习 Huffuman树 试题 基础练习 Huffuman树 ​ 翻了翻网上,基本都是暴力排序.我就提供一个最小堆的写法吧! ​ 点击这里,跳转查看最小堆插入删除函数的简单写法 Talk i ...

  10. AB实验人群定向HTE模型5 - Meta Learner

    Meta Learner和之前介绍的Casual Tree直接估计模型不同,属于间接估计模型的一种.它并不直接对treatment effect进行建模,而是通过对response effect(ta ...