js限制按钮每隔一段时间才能再次点击
标签：
JavaScript
设置属性 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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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>
web前端开发学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节
或者用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>
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
相关文章推荐
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦