设置属性 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. Springboot笔记（二）整合

    1.整合Freemarker 一种模板引擎,前端渲染模板的,类似于EL,jsp,不过比前两个好用 导入很简单   pom.xml <dependency> <groupId>o ...

  2. Java 添加OLE对象到Excel文档

    本文介绍通过Java程序添加OLE对象到Excel文档.OLE分为两种形式,一种通过嵌入(Embed),方式,一种通过链接(Link)方式.前者是将对象嵌入到文档中,外部对该对象的更改不影响嵌入操作时 ...

  3. 20200110--python学习第八天

    今日内容 进制 对于计算机而言无论是计算机存储或是网络传输输入的本质都是:二进制:例如电脑上存储的视频/图形/文件/微信/qq的表情包/小视频都是二进制. 二进制:计算机内部 八进制: 十进制: 十六 ...

  4. 忘记centos的root用户密码怎么办?

    1 重置centos7管理员密码 1.1 重置centos7管理员密码的几个步骤 1)重启服务器后,在grub菜单界面,根据界面显示的提示信息,按 e 进入编辑模式.注意:是否开启selinux,重置 ...

  5. webpack 中那些最易混淆的 5 个知识点

    学习博客:https://blog.csdn.net/wsyzxxn9/article/details/90677770 学习lodash:https://www.html.cn/doc/lodash ...

  6. springboot之swagger快速启动(新的ui)

    springboot之swagger快速启动(新的ui) 功能点: 集成swagger前端接口文档 Swagger 整合 zuul 智能列表 无缝集成 knife4j 前端文档 支持 v0.1.2RE ...

  7. git系列之---将本地的项目添加到码云仓库

    1.前情: 本地写的 Demo 传到码云上面进行维护. 2.操作步骤: git init   将本地文件初始化为git 仓库,文件件会多一个 .git 文件夹[版本库]: git add .   或者 ...

  8. Hash存储模型、B-Tree存储模型、LSM存储模型介绍

    每一种数据存储系统,对应有一种存储模型,或者叫存储引擎.我们今天要介绍的是三种比较流行的存储模型,分别是: Hash存储模型 B-Tree存储模型 LSM存储模型 不同存储模型的应用情况 1.Hash ...

  9. MySQL中使用group by 是总是出现1055的错误

    因为在MySQL中使用group by 是总是出现1055的错误,这就导致了必须去查看是什么原因了,查询了相关的资料,现在将笔记记录下来,以便后面可以参考使用: sql_mode:简而言之就是:它定义 ...

  10. javascript中如何使用js脚本模拟"request"获取url后参数值呢？

    转自:猫猫小屋--js获取url后参数信息 摘要: 下文讲述javascript中使用js代码获取url地址后面的参数值的方法分享,如下所示: 实现思路: 使用正则表达式对参数值进行匹配,获取参数后的 ...