Javascript 如何使按钮在单击时禁用1分钟？

我试图使一个按钮，将被禁用1分钟，当你点击它。 只有当按钮启用并单击时，才应向div添加25个点（div从0开始）。 每次单击后，按钮将被禁用，计时器将开始运行

下面是一些图片，让整个事情更容易理解：

类似于：

const button=document.getElementById（“myBtn”）
函数冻结（）{
button.disabled=true
setTimeout（函数（）{
button.disabled=false
}, 60000);
}
button.onclick=函数（）{
如果（button.disabled）{//避免用户在html中删除disable
//再加25
冻结
}
}

另一种可能性如下：

这是您的按钮：

<button id="MyBtn" onclick="disable_button_3_secs(); return false;">Disabled me for 3 seconds</button>

我个人喜欢对我的代码有更多的控制，所以我总是尽可能地使用变量。我已将计时器设置为3秒，但您可以随意更改

戴维德

这是你的密码

$（'btn'）.prop（'disabled'，true）；
开始计数（）；
函数getCounter（）{
返回parseInt（$（'#counter'）.html（）；
}
函数设置计数器（计数）{
$（'#counter'）.html（计数）；
}
$（“#btn”）。单击（函数（）{
设置计数器（getCounter（）+25）；
$（'#btn'）.prop（'disabled'，true）；
开始计数（）；
});
函数startCountDown（）{
var分钟=0，
秒=59；
$（“#倒计时”）.html（分钟+”：“+秒）；
var count=setInterval（函数（）{
如果（parseInt（分钟）<0 | | parseInt（秒）可以创建一个
这需要具备以下主题的知识：





定时机构，例如，带有和
可选：及其

基本结构
定义自定义元素需要扩展的JS类（或其子类之一）

然后，通过调用该类的HTML元素名（必须在其名称中包含
-
（连字符），例如“example element”）及其关联的类，将该类注册为HTML元素

我决定调用类
CounterElement
，以及HTML元素
：

类计数器元素扩展了HtmleElement{
构造函数（）{
super（）；//必需，因为我们正在扩展一个类
}
}
customElements.define（'counter-instance'，CounterElement）；

设置阴影根
设置阴影根目录如下所示：

通过调用
创建并附加其HTML元素
将样式添加到阴影根
由于一些评论提到访问元素仍然很容易，所以我决定使用
{mode:'closed'}
来阻止未知用户访问它们。然而，不是不可访问的。这需要一个，但是这个答案中没有包括这个，以保持它（稍微）简短，呵呵

使用
{mode:'closed'}
时，需要手动保留对卷影根的引用。我决定使用私有成员变量
#shadow

现在，需要创建和附加阴影根的元素。我再次为“重要”元素保留了一个私有引用：
#samp
和
#button

我还添加了一点样式

类计数器元素扩展了HtmleElement{
#阴影；
#samp；
#按钮；
构造函数（）{
超级（）；
//影子根
this.#shadow=this.attachShadow（{mode:'closed'}）；
设div=document.createElement（'div'）；
让style=document.createElement（'style'）；
style.innerHTML='div{padding:0.2rem；border:1px纯黑}'
+'samp{display:block}按钮{font-family:monospace}'；
这是.#samp=document.createElement（'samp'）；
这个.#button=document.createElement（'button'）；
div.append（this.#samp，this.#按钮）；
this.#shadow.append（style，div）；
}
}
customElements.define（'counter-instance'，CounterElement）；

设置元素
既然所有重要的元素都存在了，我们需要正确地设置它们。我的意思是添加它们应该有的文本

因为我们将跟踪计数器和秒数，所以将它们声明为成员变量是有意义的

为了将秒格式化为
mm:ss
-format格式，我编写了一个实用函数
formatTime（）
。它似乎非常方便，因此可以在全局范围内使用。

注意不要让太多的变量使全局范围变得杂乱无章。可以使用来保持它们的局部性

现在，添加文本与使用一样简单

在一条评论中，您要求在秒数达到0时让按钮显示“Collect”。这可以使用if-else语句完成，但为了简洁起见，我使用了

函数格式化时间（秒）{
var min=新字符串（数学下限（秒/60））；
var sec=新字符串（秒%60）；
而（最小长度<2）min='0'+min；
而（秒长<2）秒='0'+秒；
返回最小值+'：'+秒；
};
类计数器元素扩展了HtmleElement{
计数器=0；
秒=0；
#阴影；
#samp；
#按钮；
构造函数（）{
超级（）；
//影子根
// ...
this.updateText（）；
}
updateText（）{
this.#samp.innerText=this.counter；
this.#button.innerText=this.seconds？格式时间（this.seconds）：“收集”；
}
}
customElements.define（'counter-instance'，CounterElement）；

添加（计时器）功能
现在的最后一步是添加计时器和
onclick
-listener

由于我们希望在单击
#按钮时启动计时器，并在
秒数
达到
0
后停止计时器，因此我们可以分别使用
setInterval（）
和
clearInterval（）

前一个函数返回区间的ID，后一个函数使用其ID清除它。要按预期使用这些函数，我们需要保留对区间ID的引用
    var timeout_lenght = 3000;
    var myBtn = document.getElementById("MyBtn");

    function disable_button_3_secs() {
        myBtn.disabled = true;
        Enable_at_timer_out();
    }

    function Enable_at_timer_out() {
        setTimeout(function () {myBtn.disabled = false; }, timeout_lenght);
    }