Как показать div, когда указатель мыши не движется в течение 10 сек c, скрыть его снова через 30-40 сек c? - PullRequest
Новая
       30

Как показать div, когда указатель мыши не движется в течение 10 сек c, скрыть его снова через 30-40 сек c?

0 голосов
/ 19 марта 2020

Когда отображается экран, div не должен быть там, позже, когда мышь будет бездействовать в течение 10 секунд c, должен появиться div, и через 30-40 секунд c div должен исчезнуть автоматически.

Я использую react js и scss для укладки. 

.totalControlssWrap{
    background-color: #2E2E38;
    height: 6%;
    width: 10%;
    margin-right: -99px;
    position: absolute;
    bottom: 88px;
    right: 99px;
    opacity: 0.74;
    box-shadow: 2px 2px 16px 0px #2e2e38;
    border-radius: 10px;
    display: none;
}

<div id="totalControlssWrap" className="totalControlssWrap">
</div>

function myFunction() {
    console.log("mouse moved");
    clearTimeout(timeout);

    timeout = setTimeout(function() {
      console.log(timeout)
    }, 10000);
    if(timeout >= 50) {
      const interval = setInterval(() => {
      }, 10000);

    if (
      document.getElementById('totalControlssWrap')
    ) {
      document.getElementById("totalControlssWrap").style.display = "block";
    }
    console.log(timeout + " move your mouse");

    return () => clearInterval(interval);
  }
}
...