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

  1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  
  4.  <head>
  5.      <meta charset="UTF-8">
  6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.      <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.      <title>Document</title>
  9.  </head>
  10.  
  11.  <body>
  12.      <button id='but'> 发送 </button>
  13.  
  14.      <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  15.      <script>
  16.          $(function() {
  17.              $('#but').click(function() {
  18.                  $(this).attr("disabled", "disabled");
  19.                  var id = 10;
  20.                  //定时执行
  21.                  var timeing = setInterval(function() {
  22.                      id = id - 1;
  23.                      $('#but').html(id + 's');
  24.                  }, 1000);
  25.                  //延迟执行
  26.                  window.setTimeout(function() {
  27.                      //结束定时,恢复按钮可用
  28.                      clearInterval(timeing);
  29.                      $('#but').html('发送').removeAttr("disabled");
  30.                  }, 10000);
  31.              });
  32.          });
  33.      </script>
  34.  </body>
  35.  
  36.  </html>

或者用DOM

  1.      <script>
  2.          var but = document.getElementById('but');
  3.          but.addEventListener('click', function() {
  4.              var id = 10;
  5.              var attr = document.createAttribute("disabled");
  6.              attr.nodeValue = "disabled";
  7.              //设置节点属性
  8.              but.attributes.setNamedItem(attr);
  9.              var timeing = setInterval(function() {
  10.                  id = id - 1;
  11.                  but.innerHTML = id + 's';
  12.              }, 1000);
  13.              window.setTimeout(function() {
  14.                  clearInterval(timeing);
  15.                  but.innerHTML = '发送';
  16.                  //移除节点属性
  17.                  but.attributes.removeNamedItem('disabled');
  18.              }, 10000);
  19.          });
  20.      </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. OpenCV3入门（九）图像几何变换

    1.图像缩放 假设图像x轴的缩放因子Sx, y轴方向的缩放因子Sy,相应的变换表达式为: 函数原型为: CV_EXPORTS_W void resize( InputArray src, Output ...

  2. 《Head first设计模式》之适配器模式

    适配器模式将一个类的接口,转换成客户期望的另一个接口.适配器让原本接口不兼容的类可以合作无间. 我们周围的适配器 如果你需要在欧洲国家使用美国制造的笔记本电脑,你可能需要使用一个交流电的适配器. 你知 ...

  3. python os和sys模块使用

    python os和sys模块使用 os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") 改变当前脚本工作目录:相 ...

  4. OSPF理论

    OSPF简介 OSPF(Open Shortest Path First 开放式最短路径优先)协议是IETF为IP网络开发的IGP路由选择协议.它是一种典型的链路状态(link-state)路由协议. ...

  5. 杭电-------2053Switch Game（C语言）

    /* 题目大意是指:有n个灯泡,按1-n编号,要操作n次,第i次操作是将标号是i的倍数的变成相反状态.最终求得是n次操作后,编号为n的灯泡的状态,其实就是求n的约束有多少个,及灯泡n被操作了多少次*/ ...

  6. MATLAB添加工具箱及无法连接到MathWorks问题

    版本信息:官网下载的MATLAB R2019b 学生版 操作系统:Windows 10 在安装MATLAB时,需要我们自行选择要安装工具箱,如何在已安装MATLAB后添加当初没有选择安装的工具箱呢?第 ...

  7. ZYNQ入门实例——三种GPIO应用、中断系统及软硬件交叉触发调试

    一.前言 Xlinx的ZYNQ系列SOC集成了APU.各种专用外设资源和传统的FPGA逻辑,为ARM+FPGA的应用提供助力,降低功耗和硬件设计难度的同时极大提高两者间传输的带宽.之前在研究生课题中使 ...

  8. GNU make doc - 6.6 追加变量值

    有时我们需要对已经定义过的变量进行追加,可以使用+=进行这一操作,就像下面这样 objects += another.o 该语句取objects变量的值,并在其后追加another.o(结果会在原变量 ...

  9. Python json 序列号字典 文本的存储和读取

    rootDir='./resources/v1/'# 根目录 # 按钮测试图片 btnTestPicUrl = { 'armyAttack' : rootDir+'testPic/gj2.jpg', ...

  10. JavaScript-状态模式

    状态模式 一个对象有状态变化 每次状态变化都会触发一个逻辑 不能总是用 if...else 来控制 示例:交通信号灯的不同颜色变化 传统的 UML 类图 javascript 中的 UML 类图 cl ...