设置属性 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. （六）mybatis拦截器

    首先拦截器可以拦截mybatis四大核心对象:StatementHandler,ParameterHandler,ResultSetHandler,Executor,具体拦截时根据需求拦截一部分方法 ...

  2. 快速应用开发（RAD）平台 - 20 年的演进

    过去几年中,现代软件开发的整体环境发生了巨大的变化.对我个人来说,这种变化与宇宙的加速膨胀差不多.第二个千年刚到来时,产业的发展看起来还不是那么快,只是逐步在前进.现在技术发展的复杂度和多样性已经可以 ...

  3. Go语言实现：【剑指offer】数组中只出现一次的数字

    该题目来源于牛客网<剑指offer>专题. 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 正常能想到哈希表来处理,但此题考查的是异或的知识, ...

  4. JVM解毒——JVM与Java体系结构

    你是否也遇到过这些问题? 运行线上系统突然卡死,系统无法访问,甚至直接OOM 想解决线上JVM GC问题,但却无从下手 新项目上线,对各种JVM参数设置一脸懵逼,直接默认,然后就JJ了 每次面试都要重 ...

  5. Java 添加、读取、删除Excel文档属性

    在文档属性中,可以设置诸多关于文档的信息,如创建时间.作者.单位.类别.关键词.备注等摘要信息以及一些自定义的文档属性.下面将通过Java程序来演示如何设置,同时对文档内的已有信息,也可以实现读取和删 ...

  6. go微服务框架kratos学习笔记八 (kratos的依赖注入)

    目录 go微服务框架kratos学习笔记八(kratos的依赖注入) 什么是依赖注入 google wire kratos中的wire Providers injector(注入器) Binding ...

  7. [Linux-CentOS7]yum清华源CentOS7

    shell直接运行 cat > 01.yumrepo.sh << 'EOF' # 创建备份路径 mkdir -p /etc/yum.repos.d/repo.bak/ # 备份源 m ...

  8. 创建PyCharm工程

  9. 珠峰-6-koa-express

    ####  这里写await和return 的区别是, await后边还可以写代码,而return 不会. ##### koa这里需要注意 这样子方法1比起方法2,少写n个url类似这样的key.

  10. JavaScript中基本数据类型之间的转换

    在JavaScript中共有六种数据类型,其中有五种是基本数据类型,还有一种则是引用数据类型.五种基本数据类型分别是:Number 数值类型.String 字符串类型.Boolean 布尔类型, nu ...