这是学习js中,遇到熟悉的内容做的一个小练习,仅做了button部分,输入框还没有改进。
<input type="number"><button>发送</button>
<script>
let btn = document.querySelector('button');
let time = 59;
btn.addEventListener('click', function() {
let timer = setInterval(function() {
btn.disabled = true;
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 59;
} else {
btn.innerHTML = '还有' + time + '秒';
time--;
}
}, 1000);
});
</script>
因为通常是间隔1min发送,而代码是点击按钮后间隔1s才执行里面的循环,所以时间设定为59s了,也符合平时使用中看到的样式。
如果想要取消延迟,仅需把定时器里的代码段在前面单独演示一遍,再用函数封装即可。
如下:
<input type="number"><button>发送</button>
<script>
let btn = document.querySelector('button');
let time = 3;
btn.addEventListener('click', function() {
function fn() {
btn.disabled = true;
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 3;
} else {
btn.innerHTML = '还有' + time + '秒';
time--;
}
let timer = setInterval(function() {
if (time == 0) {
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
time = 3;
} else {
btn.innerHTML = '还有' + time + '秒';
time--;
}
}, 1000);
}
fn();
});
</script>