Javascript 如果按钮在一定时间内未单击，如何隐藏元素

我正在写一个简单的掷硬币项目来磨练我的JS技能

我有一个

，如果几秒钟内没有单击按钮，我希望它被隐藏。我怎样才能做到这一点

我曾尝试使用

style.visibility

和

sleep（）

在行间隐藏/显示它，但它似乎效率很低，在其他部分会导致很多问题

让正面=0，反面=0；
让coinFlip=（）=>{
让我们翻转=（）=>{
返回Math.floor（（Math.random（）*2）+1）；
}
让结果=翻转（）；
如果（结果==1）{
heads++；
document.getElementById（“winMessage”）.innerHTML=“Heads！”
}
否则如果（结果===2）{
tails++；
document.getElementById（“winMessage”）.innerHTML=“Tails！”
}
document.getElementById（“heads”）.innerText=heads；
document.getElementById（“tails”）.innerHTML=tails；
}

投币器
扔硬币
翻转它！
总人数：
尾数：
```

使用和：

• 主作用域中的const hide=setTimeout（），延迟作为第二个参数

• 清除超时（隐藏）

  在按钮上单击

• element.style.display=“none”

  隐藏元素
• 或者，当您使用引导时，我想您可以使用

让正面=0，反面=0；
让coinFlip=（）=>{
清除超时（隐藏）；
让我们翻转=（）=>{
返回Math.floor（（Math.random（）*2）+1）；
}
让结果=翻转（）；
如果（结果==1）{
heads++；
document.getElementById（“winMessage”）.innerHTML=“Heads！”
}
否则如果（结果===2）{
tails++；
document.getElementById（“winMessage”）.innerHTML=“Tails！”
}
document.getElementById（“heads”）.innerText=heads；
document.getElementById（“tails”）.innerHTML=tails；
}
常量隐藏=设置超时（（）=>{
document.getElementById（'winMessage'）。style.display='none'
}，3000）

扔硬币
翻转它！
3000毫秒后隐藏
总人数：
尾数：

您应该在程序开始时启动计时器。每次按下按钮时，计时器应被擦除，并启动一个新的计时器。下面是一个使用and的示例

var时间=5000；
var timeoutID=setTimeout（hideElement，time）；
document.querySelector（“按钮”）.addEventListener（“单击”，延迟）；
函数延迟（）{
clearTimeout（timeoutID）；
timeoutID=setTimeout（隐藏元素，时间）；
}
函数hideElement（）{
document.querySelector（“#hide”）.style.display=“无”；
}

隐藏
延迟

类似这样的事情：

setTimeout（（）=>{
document.getElementById（“winMessage”）.style.display='none'；
}, 3000); // 3秒

---

winMessage

使用css的简单方法。与css动画

@关键帧显示隐藏{
0%{不透明度：0；}
10%{不透明度：0.2}
20%{不透明度：0.35}
50%{不透明度：1}
60%{不透明度：0.75}
100%{不透明度：0；}
}
#winMessage{
高度：100px；
不透明度：0；
宽度：100px；
背景：红色；
动画名称：showHide；
动画持续时间：2秒；
动画迭代次数：无限；
动画方向：交替；
动画延迟：1s；
}

---

您尝试过document.getElementById（“winMessage”）.style.display=“无”了吗？不是答案，而是指向正确方向的指针：创建一个函数（隐藏元素）并使用

setTimeout（functionname，3000）

其中3000是以毫秒为单位的延迟，这些是进入异步领域的第一步，对于所有新来者来说，要掌握将来某个时候将运行的函数的复杂性还有一个小小的障碍。但这没什么大不了的，只是拥抱它。但它最初显示的信息是“隐藏在…之后”，然后对后续的信息不做任何处理。或者我遗漏了什么？是的，这只是为了举例——我给了你工具，业务逻辑是为你实现的：）。根据你的需要切换这两个功能。哦，有一刻我以为你误解了我的问题。谢谢你的回答，我现在就试试！祝你玩得开心，伙计，我相信你会成功的：）。