设置属性 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. jsp关于request.setAttribue还有response.addCookie()的两个问题

    刚才使用request.getAttribute();时候无法获取到值,一直为null,经过分析,得到下面的 index1.jsp <%-- Created by IntelliJ IDEA. ...

  2. 教你如何快速上手markdown语法，编写技术博客（史上最全最简，用MarkDown写博客）

    首先,进行有道云笔记官网,新建一份markdown文档, 如下图 然后,在文档编辑区,左边,复制如下段落文字 加粗 斜线 标记颜色 下划线 废弃线 一级标题 二级标题 三级标题 四级标题 五级标题 六 ...

  3. Qt 条件编译 arm windows linux 判断 跨平台

    如果代码里面有些判断需要不同的参数做判断: 办法:在pro文件里面做定义 方法1:直接定义一个宏:用的时候可以直接判断,这样做不好的地方是编译前需要重新切换一下宏 1)定义宏 DEFINES += _ ...

  4. 数据库主从监控脚本,数据传到influxdb

    #!/bin/bash port=`/usr/sbin/ss -ntlp | | awk '{print $4}' | awk -F":" '{print $2}'` array= ...

  5. 你一定看得懂的 DDD+CQRS+EDA+ES 核心思想与极简可运行代码示例

    前言 随着分布式架构微服务的兴起,DDD(领域驱动设计).CQRS(命令查询职责分离).EDA(事件驱动架构).ES(事件溯源)等概念也一并成为时下的火热概念,我也在早些时候阅读了一些大佬的分析文,学 ...

  6. MyEclipse10下载安装破解及汉化内含jdk8u241及其帮助文档

    下载MyEclipse10以及破解包 MyEclipse10: 提取码:020c 破解包 提取码:mycj 注:破解包内含有破解教程,很详细,这里就不多说了 MyEclipse10汉化 操作系统:wi ...

  7. 区间操作---树状数组&&线段树

    涉及区间操作的一些套路必须要会呀 区间加减为了偷懒能不写线段树so我选择树状数组!! 但是区间乘除,最大值我想了想还是用线段树分块吧. 树状数组: 这里用网上的一张图: 这里灰色数组是原本的数组(a[ ...

  8. 搭建Linux(Ubuntu)系统下的Differential Datalog运行环境

    DDlog is a bottom-up, incremental, in-memory, typed Datalog engine. It is well suited for writing pr ...

  9. Python——捕获异常

    一.什么是异常 """异常:错误,bug处理异常:尝试执行某句可能出现异常的语句, 若出错则用正确的代码去替代. try: 可能发生错误的代码except: 如果出现异常 ...

  10. 关于...corresponds to your MySQL server version for the right syntax to use near '?' at line 1的解决办法

    完整报错信息: java.sql.SQLSyntaxErrorException: You have an error in your SQL syntax; check the manual tha ...