Javascript 如果在30秒内未单击，请应用CSS一次，将其删除，然后重新迭代

因此，我有一个带有动画的时髦小玩意儿，我希望只有在用户30秒没有点击

的情况下才能运行它

我想问的是，有人能给我指出正确的方向吗，所以当有人没有点击时：

<div class="someDiv">
</div>

这意味着单击将强制脚本计数器重新开始，30秒内没有单击将应用CSS至少1,5秒，然后将其删除，然后启动计时器。这可能是我的谷歌搜索技能的错，但我就是不知道如何让它工作这是我还没有弄清楚的单击时间/重置部分。

---

链接、想法、建议。我会为这一切感到高兴的。谢谢。

我建议您使用setTimeout

在文档加载时，通过定义一个等于计时器的变量来启动setTimeout，该计时器在一定的毫秒数后添加内容。然后将计时器变量重新定义为新的setTimeout，以获得新的毫秒数

var myTimer;
myTimer = setTimeout(function(){ /*do stuff after 3 seconds*/ }, 3000);

然后，如果有人采取措施停止计时器，您可以通过以下方式停止计时器：

clearTimeout(myTimer);

下面是一个例子：

（函数（）{
var myTimer，
announced=document.getElementById（“announcement”），
button=document.getElementById（“stopIt”）；
函数firstTimer（）{
announcement.innerHTML=''；
myTimer=setTimeout（函数（）{
populateContent（）；
}, 500);
}
函数populateContent（）{
announcement.innerHTML='按下按钮！！'；
myTimer=setTimeout（函数（）{
firstTimer（）；
}, 500);
}
按钮。addEventListener（'click'，函数（）{
clearTimeout（myTimer）；
});
firstTimer（）；
}());
#公告{
边框：1px纯红；
身高：5ex；
宽度：30%；
}

住手我不是专家，所以有人可能会有更好的答案，但我认为您可以使用Javascript中的setTimeout函数来实现这一点


该页面上的第一个示例似乎与您想要的相似，这里有一个未经测试的建议：

HTML:
实例

设置CSS在30秒后反弹

重置计时器

Javascript:
var-timeoutID

function setBounce() {
  timeoutID = window.setTimeout(bounceIt, 30000);
}

function bounceIt() {
  // Code to find the bounce div, apply the CSS style to it,
  // and then add a new timeout on the CSS to remove the style after 1.5s

}

function unbounceIt(bounceTimeoutID) {
  window.clearTimeout(bounceTimeoutID);
}

function resetBounceTimer() {
  window.clearTimeout(timeoutID);
}

希望这是朝着正确方向迈出的一步
setTimeout（）
动画触发功能
clearTimeout（）
it，然后单击再次设置。@DanielBeck我将进行一段时间的实验，因此缺少响应实验，因此缺少响应。谢谢。我刚刚发布了一个例子。最好在评论中提及他/她。。要提醒他/她您发送了新邮件：）@AlgernopK。我刚刚给你贴了一个例子。打电话到夜班，然后他们说“没有必要，我们解决了。”。我会在1小时内或在实验中检查，因此没有反应。非常感谢。
function setBounce() {
  timeoutID = window.setTimeout(bounceIt, 30000);
}

function bounceIt() {
  // Code to find the bounce div, apply the CSS style to it,
  // and then add a new timeout on the CSS to remove the style after 1.5s

}

function unbounceIt(bounceTimeoutID) {
  window.clearTimeout(bounceTimeoutID);
}

function resetBounceTimer() {
  window.clearTimeout(timeoutID);
}