设置属性 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>
- 14
- <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);
- // 延迟执行
- Windows.setTimeout(function() {
- // 结束定时, 恢复按钮可用
- clearInterval(timeing);
- $('#but').HTML('发送').removeAttr("disabled");
- },
- 10000);
- });
- });
- </script>
- </body>
- </HTML>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法
(详细的前端项目实战教学视频, PDF)
或者用 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);
- Windows.setTimeout(function() {
- clearInterval(timeing);
- but.innerHTML = '发送';
- // 移除节点属性
- but.attributes.removeNamedItem('disabled');
- }, 10000);
- });
- </script>
来源: http://www.jianshu.com/p/0efbb4ea646b