Javascript 我的代码中的按钮只能工作一次

我完成了下面的简单代码：

• HTML和CSS：

但“显示时间”按钮仅在第一次使用时有效，如果再次尝试显示日期，则无效。

如果我没有弄错的话，我认为问题在于方法setInterval（）只工作一次，但我不知道如何解决这个问题。

---

有人能告诉我如何解决这个问题吗？

这是因为您在

clearAll

函数中隐藏了计时器末尾的元素：

document.getElementById('time').style.display = "none";
document.getElementById('tick').style.display = "none";

因此，当您再次单击时，必须再次显示它们

此外，如果您多次单击该按钮，您将多次运行函数

tick

，它将更快地减少计时器

我实现了一个保护，以防止多次运行该功能，并重置计时器

console.log（'console工作正常！'）；
/**********************************************************************/
var x=60；
var isRunning=false；
函数tick（）{
变量日期=新日期（）；
document.getElementById（“时间”）.innerHTML=日期；
x--；
document.getElementById（'tick'）.innerHTML=`时间将在${x}秒之后隐藏'；
}
函数clearAll（id）{
窗口。清除间隔（id）；
document.getElementById（'time'）.style.display=“无”；
document.getElementById（'tick'）.style.display=“无”；
isRunning=false；
}
功能按钮手柄（e）{
如果（isRunning==false）{//要防止多次单击以运行多次勾选功能
isRunning=true；
x=60；//重置计时器
document.getElementById（'time'）.style.display=“block”//再次显示
document.getElementById（'tick'）.style.display=“block”//再次显示
var id=窗口设置间隔（刻度，1000）；
setTimeout（（）=>clearAll（id），60000）；
}
}
/**********************************************************************/

javaScript控制台
按钮{文本对齐：居中；
宽度：200px；
高度：30px；
字号：17px；
字体系列：信使新；
边框：纯色2px黑色；
字体大小：粗体；
背景颜色：浅蓝色；
光标：指针；
边界半径：20px；
过渡：0.5s；
}
按钮：悬停{
变换：比例（1.2,1.2）；
字号：19px；
背景色：青色；
}
控制台上的javaScript测试
享受编码的乐趣



表演时间

console.log('Console is working fine !'); 

/**********************************************************************/
var x = 60;
function tick() {
    var date = new Date();
    document.getElementById("time").innerHTML = date;
    x--;
    document.getElementById('tick').innerHTML = `The time will be hidden after ${x} seconds`;

}

function clearAll(id) {
    window.clearInterval(id);
    document.getElementById('time').style.display = "none";
    document.getElementById('tick').style.display = "none";
}

function buttonHandler(e) {
    var id = window.setInterval(tick,1000);

    setTimeout(()=> clearAll(id),60000);

}

/**********************************************************************/

document.getElementById('time').style.display = "none";
document.getElementById('tick').style.display = "none";