JavaScript实现 按钮不可过频繁使用
2021/11/9 17:14:31
本文主要是介绍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实现 按钮不可过频繁使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?