JavaScript实现按钮不可过频繁使用

主要用到setInterval和clearInterval方法和一个计时变量。

效果

代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>BOM</title><style>*{margin: 10px;}</style>
</head><body><input type="text"><button>发送</button>
</body>
<script>var btn = document.querySelector('button');btn.addEventListener('click',function(){btn.disabled = true;var i = 6;var timer = setInterval(function(){i --;btn.innerHTML = "再过"+i+"s才能发送";if(i==0){clearInterval(timer);btn.disabled = false;btn.innerHTML = "发送";}},1000);})</script></html>

JavaScript实现按钮不可过频繁使用相关推荐

JavaScript给按钮绑定点击事件（onclick）的方法及js常见事件
本文实例讲述了JavaScript给按钮绑定点击事件(onclick)的方法.分享给大家供大家参考.具体分析如下: 我们可以通过设定按钮的onclick属性来给按钮绑定onclick事件 <!D ...
【JavaScript】按钮绑定点击事件-onCliek事件
[JavaScript]按钮绑定点击事件-onCliek事件 <button type="submit" id="btn">btn</butt ...
JavaScript的按钮点击事件绑定
JavaScript的按钮点击事件绑定: <!DOCTYPE html> <html lang="en"> <head><meta cha ...
用JavaScript实现按钮点击事件
开发工具与关键技术:DW软件,CSS3的函数的调用作者:陈隆撰写时间:2019年01月16日先创建一个HTML文件,把相关的布局写好到HTML中,把页面写好,写好之后把页面使用定位定好后使用di ...
Javascript带按钮的轮播广告
源码 <!DOCTYPE html> <html> <head><title></title><style type="te ...
FLASK中利用javascript实现按钮点击事件
1.建立js文件test.js function bindCaptchaBtnClick(){$("#captcha-btn").click(function(){alert(&q ...
使用JavaScript在文本框中的Enter键上触发按钮单击
我有一个文本输入和一个按钮(见下文). 当在文本框中按下Enter键时,如何使用JavaScript 触发按钮的click事件 ? 当前页面上已经有一个不同的"提交"按钮,因此我不 ...
javascript网页特效——按钮特效
实例一:不同的按钮提交不同的表单地址 <script type="text/javascript"> //提交表单function submitForm(btn){va ...
【学习】自学JavaScript
第一章 JavaScript简介 1.1.JavaScript的起源 JavaScript诞生于1995年,它的出现主要是用于处理网页中的前端验证.所谓的前端验证,就是指检查用户输入的内容是否符合一定 ...

JavaScript实现按钮不可过频繁使用

JavaScript实现按钮不可过频繁使用相关推荐

最新文章

热门文章

JavaScript实现 按钮不可过频繁使用

JavaScript实现 按钮不可过频繁使用相关推荐

最新文章

热门文章

JavaScript实现按钮不可过频繁使用

JavaScript实现按钮不可过频繁使用相关推荐