gpt4 book ai didi

javascript - 如何禁用按钮一段时间并再次重复(javaScript)

转载 作者:行者123 更新时间:2023-12-01 00:08:26 25 4
gpt4 key购买 nike

我的目标是当我点击按钮时..按钮将被禁用,直到 60 秒过去...(例如 1 分钟倒计时)当该时间段过去后,按钮将变为启用状态,并且可以再次重复该操作

这是我的 html

<body id="body1">
<button id="myButton">Click</button>
<div id="mydiv" style="text-align: center; margin-top: 200px; font-size: 70px">

</div>
<div id="timer" style="text-align: center; font-size: 70px">

</div>
</body>

这是我的js

<script type="text/javascript"  >
var seconds=60;
var timer;
function myFunction()
{
if(seconds < 60) {
document.getElementById("timer").innerHTML = seconds;
}
if (seconds >0 )
{
seconds--;
document.getElementById('mydiv').innerHTML='close';
document.getElementById('myButton').style.backgroundColor='red';
document.getElementById('myButton').setAttribute('disabled');
}
else {
document.getElementById('mydiv').innerHTML='open';
document.getElementById('myButton').style.backgroundColor='green';
document.getElementById('myButton').removeAttribute('disabled');

}
}
document.getElementById("myButton").onclick = function()
{
if(!timer)
{
timer = window.setInterval(function(){myFunction();}, 1000);
}
}
document.getElementById("timer").innerHTML="0:00";

</script>

最佳答案

您可以使用setTimeout来禁用和启用该按钮:

const btn = document.getElementById("myBtn")
function myFunction() {
btn.disabled = true;
setTimeout(()=>{
btn.disabled = false;
console.log('Button Activated')}, 5000)
}
<button id="myBtn" onclick="myFunction()">Click</button>

关于javascript - 如何禁用按钮一段时间并再次重复(javaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60214165/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com