设置属性 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. python练习——第0题

    原GitHub地址:https://github.com/Yixiaohan/show-me-the-code 题目:将你的 QQ 头像(或者微博头像)右上角加上红色的数字,类似于微信未读信息数量那种 ...

  2. 动手学习Pytorch(7)--LeNet

    Convolutional Neural Networks 使用全连接层的局限性: 图像在同一列邻近的像素在这个向量中可能相距较远.它们构成的模式可能难以被模型识别. 对于大尺寸的输入图像,使用全连接 ...

  3. 一文带你了解 C# DLR 的世界

    一文带你了解 C# DLR 的世界 在很久之前,我写了一片文章dynamic结合匿名类型 匿名对象传参,里面我以为DLR内部是用反射实现的.因为那时候是心中想当然的认为只有反射能够在运行时解析对象的成 ...

  4. 【python爬虫】windoes的爬虫中文乱码现象，通用转码解决

    page = session.get(url="https://www.qidian.com/") page.encoding = page.apparent_encoding p ...

  5. Unity 编辑器开发SceneView GUI控制

    前几天项目需要就做了个类似于Collider EditCollider的功能 下面是我做的效果 基础代码如下: public class ExportCFGInputWindow : EditorWi ...

  6. ElasticSearch集群-Windows

    概述 ES集群是一个P2类型的分布式系统,除了集群状态管理以外,其他所有的请求都可以发送到集群内任意一台节点上,这个节点可以自己找到需要转发给哪些节点,并且直接跟这些节点通信.所以,从网络架构及服务配 ...

  7. 【转】Redis内部数据结构详解——ziplist

    本文是<Redis内部数据结构详解>系列的第四篇.在本文中,我们首先介绍一个新的Redis内部数据结构--ziplist,然后在文章后半部分我们会讨论一下在robj, dict和zipli ...

  8. Android Studio安装虚拟机步骤

    1. 新建 或者 2. 按图中的步骤,选择一款设备,建议选择分辨率小的,不占内存 3. 按图 4. 按图 5. 点击finish后,选择之前下载的虚拟机,点next 6. 虚拟机重命名 7. 到这里, ...

  9. 前端的Cookies

    Cookies cookies 特性 前端数据存储 后端通过 HTTP 头设置 请求时通过 HTTP 头传给后端 前端可读可写 遵守同源策略 域名 有效期 路径 http-only secure(ht ...

  10. Android布局管理器-使用TableLayout表格布局管理器实现简单的用户登录页面

    场景 Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...