如何显示div,如果每5秒按钮没有点击

问题描述 投票:-4回答:2

我有一个隐藏的div,我想显示div,但我有一个条件,如果每5秒按钮点击,然后div不显示,如果5秒后按钮没有点击,然后div显示。

<div style="display: none;">You Fail.</div>
<button type="button" id="proceed">5 seconds click</button>
javascript
2个回答
0
投票

你可以使用setTimeoutclearTimeout

let timeout;
document.querySelector('#btn').onclick = (e) => {
  clearTimeout(timeout);
  document.querySelector('#div').style.visibility = "hidden";
  timeout = setTimeout(() => {
    document.querySelector('#div').style.visibility = "visible";
  }, 5000);
};
<button id="btn">Click me</button>
<div id="div">Click the button again</div>

0
投票

HTML:

<div id="hiddenContent" class="hidden">Some hidden content</div>

<button id="myButton">Click Here</button>

JavaScript的:

(() => {

  const $hidden = document.getElementById('hiddenContent');
  const $myButton = document.getElementById('myButton');
  let intervalId;

  const restartTimer = () => {
    $hidden.classList.add('hidden');
    intervalId = setInterval(() => {
      $hidden.classList.remove('hidden');
    }, 5000)
  };

  const cancelTimer = () => {
    clearInterval(intervalId);
    restartTimer();
  };

  $myButton.addEventListener('click', cancelTimer);
  restartTimer();

})();

工作fiddle

© www.soinside.com 2019 - 2024. All rights reserved.