设置属性 disabled 可以限制交互，单击按钮时添加disabled=“disabled”属性，再为按钮添加定时器，一定时间后删除定时器和disabled属性
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>Document</title>
9 </head>
10
11 <body>
12 <button id=‘but‘> 发送 </button>
13
14 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
15 <script>
16 $(function() {
17 $(‘#but‘).click(function() {
18 $(this).attr("disabled", "disabled");
19 var id = 10;
20 //定时执行
21 var timeing = setInterval(function() {
22 id = id - 1;
23 $(‘#but‘).html(id + ‘s‘);
24 }, 1000);
25 //延迟执行
26 window.setTimeout(function() {
27 //结束定时,恢复按钮可用
28 clearInterval(timeing);
29 $(‘#but‘).html(‘发送‘).removeAttr("disabled");
30 }, 10000);
31 });
32 });
33 </script>
34 </body>
35
36 </html>
或者用DOM
1 <script>
2 var but = document.getElementById(‘but‘);
3 but.addEventListener(‘click‘, function() {
4 var id = 10;
5 var attr = document.createAttribute("disabled");
6 attr.nodeValue = "disabled";
7 //设置节点属性
8 but.attributes.setNamedItem(attr);
9 var timeing = setInterval(function() {
10 id = id - 1;
11 but.innerHTML = id + ‘s‘;
12 }, 1000);
13 window.setTimeout(function() {
14 clearInterval(timeing);
15 but.innerHTML = ‘发送‘;
16 //移除节点属性
17 but.attributes.removeNamedItem(‘disabled‘);
18 }, 10000);
19 });
20 </script>
原文地址：https://www.cnblogs.com/umbed/p/12039583.html
时间： 2024-11-10 09:20:15