Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Помогите улучшить таймер. Работает только когда пользователь на странице (https://javascript.ru/forum/events/75843-pomogite-uluchshit-tajjmer-rabotaet-tolko-kogda-polzovatel-na-stranice.html)

crystaltrumpet 11.11.2018 16:06

Вот структура HTML кода:
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
    <title>Просмотр сайтов</title>
    <meta name="robots" content="none" />
   </head>
   <frameset onLoad="javascript: frame_footer.startClock();" rows="*,70" style="border: none;">
    <frame name="frame_site" src="<?php echo $result['url']; ?>" marginwidth="0" marginheight="0" frameborder="0" />
    <frame name="frame_footer" src="/serf-fblock.php?cnt=<?php echo $_SESSION['view']['cnt']; ?>" marginwidth="0" marginheight="0" scrolling="no" noresize="noresize" frameborder="0" />
   </frameset>
  </html>

рони 11.11.2018 16:29

crystaltrumpet,
более ничем помочь не могу
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<div id="blockwait">blockwait</div>
<div id="blocktimer" style="display: none">blocktimer</div>
<form name="frm" action="http://">
<input name="clock">
</form>
<script>
var mya = true, tm, vtime = 5;
function startClock() {
    clearTimeout(tm);
    if (!vtime) {
        document.getElementById('blockwait').style.display = 'none';
        document.getElementById('blocktimer').style.display = '';
    }

    if (vtime >= 0 && mya ) {
        document.forms['frm'].clock.value = vtime;
        vtime--;
        tm = setTimeout(startClock, 1000);
    }
}
startClock()
 window.onfocus = function(){ mya = true; startClock()}
 window.onblur = function(){ mya = false;}
  </script>
</body>
</html>

crystaltrumpet 11.11.2018 17:19

Рони, спасибо Вам большое и на этом.
Вы всегда помогаете, сколько я помню..
К сожалению я не знаю как Ваш скрипт перенести на мой сайт(
но спасибо Вам. может ктото еще знает решение ?
как переделать функцию?

MallSerg 11.11.2018 19:46

как вариант использовать API браузера https://developer.mozilla.org/en-US/...Visibility_API

crystaltrumpet 12.11.2018 08:53

Ваш вариант с API думаю имеет смысл, но как это совместить с моим таймером? чтобы когда я на странице - таймер шел, когда переключился - таймер ждал...
вот маленький код полностью рабочий! на API который я нашел:
<div class="container">
  <h1 class="title">Hey! You're here. Don't leave</h1>
</div>

var title = document.querySelector('.title');
var handleChange = function handleChange() {
  if (!document.hidden) {
    setTimeout(function () {
      document.body.classList.remove('hidden');
      title.innerText = 'But you\'re back now';
    }, 2000);
  } else {
    document.body.classList.add('hidden');
    title.innerText = 'I missed you';
  }
};

window.addEventListener('visibilitychange', handleChange);

Он работает с полоборота! Помогите совместить этот код с запуском и остановкой функции:
function startClock() {
    if (vtime == 60) {
        document.getElementById('blockwait').style.display = 'none';
        document.getElementById('blocktimer').style.display = '';
    }
    if (vtime >= 0) {
        document.forms['frm'].clock.value = vtime;
        vtime ++;
        tm = setTimeout("startClock(0)", 1000);
    } else {
        if (tm)
            clearTimeout(tm);
        nextstep(0, cnt);
    }
}

crystaltrumpet 12.11.2018 09:09

по сути мне нужно реализовать исполнение visibilitychange но я не могу это сделать? буду благодарен за помощь.

рони 12.11.2018 09:27

crystaltrumpet,
:-?
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">


</head>

<body>
<div id="blockwait">blockwait</div>
<div id="blocktimer" style="display: none">blocktimer</div>
<form name="frm" action="http://">
<input name="clock">
</form>
<script>
var mya = true, tm, vtime = 0;
function startClock() {
    clearTimeout(tm);
    document.forms['frm'].clock.value = vtime;
    if (vtime < 5) {
        !document.hidden && vtime++;
        tm = setTimeout(startClock, 1000);
    }
    else {
       document.getElementById('blockwait').style.display = 'none';
       document.getElementById('blocktimer').style.display = '';
    }

}
startClock()

  </script>
</body>
</html>

crystaltrumpet 12.11.2018 09:32

Ронни, к сожалению не работает думаю нужно попробовать реализовать на API
может вот такой функцией:
var handleChange = function handleChange() {
  if (!document.hidden) {
  } else {
  }
};

window.addEventListener('visibilitychange', handleChange);


Может поменяв название функции handleChange на startClock

рони 12.11.2018 09:37

Цитата:

Сообщение от crystaltrumpet
не работает

может разобратся почему не работает?

crystaltrumpet 12.11.2018 09:46

Не работает может потому что я профан в javascript :blink:
и я не знаю как совместить Ваш код, который вы переделали с моим:
function startClock() {
    if (vtime == stattime) {
        document.getElementById('blockwait').style.display = 'none';
        document.getElementById('blocktimer').style.display = '';
    }
    if (vtime >= 0) {
        document.forms['frm'].clock.value = vtime;
        vtime ++;
        tm = setTimeout("startClock(0)", 1000);
    } else {
        if (tm)
            clearTimeout(tm);
        nextstep(0, cnt);
    }
}

хотя логично что был бы не профаном не пришел бы на форум - сам бы сделал уже и не мучал на форуме людей )


Часовой пояс GMT +3, время: 21:03.