Помогите улучшить таймер. Работает только когда пользователь на странице
Прошу помощи в добавлении функции проверки: на странице ли пользователь или нет.
если нет то таймер стоит и ждет когда пользователь зайдет. Сам таймер:
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);
}
}
Нашел вот такой вариант с созданием переменной mya:
window.onfocus = function(){ mya = true; }
window.onblur = function(){ mya = false; }
но как это реализовать в моем таймере у меня не выходит :-? Плюс у меня еще есть php переменная $add_bonus = 1 или 0; Так вот нужно сделать что когда $add_bonus = 1 то таймер останавливается при переходе на другую вкладку, а когда на 0 то продолжает идти. |
crystaltrumpet,
if (vtime >= 0 && mya ) window.onfocus = function(){ mya = true; startClock()} window.onblur = function(){ mya = false; clearTimeout(tm);} |
Я сделал так Вы сказали но видимо где то я ошибся. не хочет работать.:
function startClock() {
if (vtime == stattime) {
document.getElementById('blockwait').style.display = 'none';
document.getElementById('blocktimer').style.display = '';
}
var mya = true;
if (vtime >= 0 && mya ) {
document.forms['frm'].clock.value = vtime;
vtime --;
tm = setTimeout("startClock(0)", 1000);
window.onfocus = function(){ mya = true; startClock()}
window.onblur = function(){ mya = false; clearTimeout(tm);}
} else {
if (tm)
clearTimeout(tm);
nextstep(0, cnt);
}
}
но что то не работает |
|
crystaltrumpet,
строки 11 и 12 уберите из функции |
Так а если я их уберу - это же самые главные строки
как тогда отлеживать события будут? Я убрал получилось вот так и ничего не работает:
function startClock() {
if (vtime == stattime) {
document.getElementById('blockwait').style.display = 'none';
document.getElementById('blocktimer').style.display = '';
}
var mya = true;
if (vtime >= 0 && mya ) {
document.forms['frm'].clock.value = vtime;
vtime --;
tm = setTimeout("startClock(0)", 1000);
} else {
if (tm)
clearTimeout(tm);
nextstep(0, cnt);
}
}
|
crystaltrumpet,
а добавить эти строки после скрипта? |
Сделал вот так - результат не изменился:
function startClock() {
if (vtime == stattime) {
document.getElementById('blockwait').style.display = 'none';
document.getElementById('blocktimer').style.display = '';
}
var mya = true;
if (vtime >= 0 && mya ) {
document.forms['frm'].clock.value = vtime;
vtime --;
tm = setTimeout("startClock(0)", 1000);
} else {
if (tm)
clearTimeout(tm);
nextstep(0, cnt);
}
}
window.onfocus = function(){ mya = true; startClock()}
window.onblur = function(){ mya = false; clearTimeout(tm);}
|
crystaltrumpet,
var mya = true, tm;
function startClock() {
clearTimeout(tm);
if (vtime == stattime) {
document.getElementById('blockwait').style.display = 'none';
document.getElementById('blocktimer').style.display = '';
}
if (vtime > 0 && mya ) {
vtime--;
document.forms['frm'].clock.value = vtime;
tm = setTimeout(startClock, 1000);
}
}
window.onfocus = function(){ mya = true; startClock()}
window.onblur = function(){ mya = false;}
|
Не работает - когда я перехожу на соседнюю вкладку - таймер продолжает работать
Но когда я на странице кликаю вверху - время останавливается когда внизу - начинает идти http://prntscr.com/lgyrtj |
Вот структура 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>
|
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>
|
Рони, спасибо Вам большое и на этом.
Вы всегда помогаете, сколько я помню.. К сожалению я не знаю как Ваш скрипт перенести на мой сайт( но спасибо Вам. может ктото еще знает решение ? как переделать функцию? |
как вариант использовать API браузера https://developer.mozilla.org/en-US/...Visibility_API
|
Ваш вариант с 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);
}
}
|
по сути мне нужно реализовать исполнение visibilitychange но я не могу это сделать? буду благодарен за помощь.
|
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>
|
Ронни, к сожалению не работает думаю нужно попробовать реализовать на API
может вот такой функцией:
var handleChange = function handleChange() {
if (!document.hidden) {
} else {
}
};
window.addEventListener('visibilitychange', handleChange);
Может поменяв название функции handleChange на startClock |
Цитата:
|
Не работает может потому что я профан в 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);
}
}
хотя логично что был бы не профаном не пришел бы на форум - сам бы сделал уже и не мучал на форуме людей ) |
crystaltrumpet,
не знаю что делает ваш код, все попытки понять были выше. |
М.б. как-то так?
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8"
</head>
<body>
<form name="frm" action="http://">
<input name="clock">
</form>
<script>
var mya = true, tm, vtime = 0;
function startClock(parm) {
if (parm == "stop") {
clearTimeout(tm);
}
else {
document.forms['frm'].clock.value = vtime;
vtime++;
tm = setTimeout(startClock, 1000);
}
}
startClock("start");
var handleChange = function () {
if (!document.hidden) {
startClock("start");
} else {
startClock("stop");
}
};
window.addEventListener('visibilitychange', handleChange);
</script>
</body>
</html>
|
| Часовой пояс GMT +3, время: 21:27. |