| | Вот есть пример таймера, при обновлении страницы таймер продолжает отсчет времени, при закрытии браузера таймер сбивается.
Нужно сделать чтобы при обновлении страницы и при новом открытии браузера таймер продолжал свой отсчет.
Пример: я зашел на страницу в 12 часов дня установил в поле часы число 24 и нажал на кнопку "запустить обратный отсчет", закрыл браузер, выключил комп, прихожу через час включаю комп захожу на страницу и вижу что таймер показывает уже 23 часа и продолжает отсчет.
Также нужно сделать чтобы на странице можно было запустить несколько таймеров не зависящих друг от друга.
Скрипт будет вставлен на html странице, php мне НЕ НАДО без всяких баз данных.
На втором коде показано как примерно должна выглядеть страница в рабочем состоянии.
Мой ящик [email]Denisich84@mail.ru[/email]
Цена в районе 300WMR
Первый скрипт
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
#set_timer, #timer, #stop_timer {display: none}
#timer {color: black}
</style>
<script>
var FINAL, TIMER;
onload = function ()
{
with (document)
{
_CS = getElementById ('cS'); SS_ = getElementById ('sS');
_CM = getElementById ('cM'); SM_ = getElementById ('sM');
_CH = getElementById ('cH'); SH_ = getElementById ('sH');
_CD = getElementById ('cD'); SD_ = getElementById ('sD');
}
var dC = unescape (document.cookie);
if (dC.indexOf ('type=1') < 0)
{document.getElementById ('set_timer').style.display = 'block'; SD_.focus ()}
else
{
var pm = dC.split ('; ');
for (var j = 0, lj = pm.length; j < lj; j++)
if (pm [j].indexOf ('type=1+') == 0) {FINAL = pm [j].split ('+') [1]; break}
var cT = parseInt (new Date ().valueOf () / 1000, 10);
var d = FINAL - cT;
document.getElementById ('txt').innerHTML = (d >= 0) ? 'До конца света осталось' : 'После конца света прошло';
if (d < 0) {d *= -1; document.getElementById ('timer').style.color = 'red'}
var s = d % 60; d -= s; d /= 60; _CS.innerHTML = s;
var m = d % 60; d -= m; d /= 60; _CM.innerHTML = m;
var h = d % 24; d -= h; d /= 24; _CH.innerHTML = h; _CD.innerHTML = d;
with (document)
{
getElementById ('timer').style.display = 'block';
getElementById ('stop_timer').style.display = 'inline';
}
TIMER = setTimeout ('FuncTimer ()', 1000);
}
}
function FuncSetTimer ()
{
var sDv = SD_.value, sHv = SH_.value, sMv = SM_.value, sSv = SS_.value;
if (sDv.replace (/\d/g, '').length || sHv.replace (/\d/g, '').length ||
sMv.replace (/\d/g, '').length || sSv.replace (/\d/g, '').length) return;
var per = ((sDv) ? sDv : 0) * 24 * 60 * 60 + ((sHv) ? sHv : 0) * 60 * 60 +
((sMv) ? sMv : 0) * 60 + ((sSv) ? sSv : 0) * 1;
var cT = new Date ().getTime ();
FINAL = per + parseInt (cT / 1000, 10);
document.cookie = escape ('type=1+' + FINAL + '; expires=' + (cT + 180 * 24 * 60 * 60* 1000));
_CS.innerHTML = (sSv) ? sSv : 0; _CM.innerHTML = (sMv) ? sMv : 0;
_CH.innerHTML = (sHv) ? sHv : 0; _CD.innerHTML = (sDv) ? sDv : 0;
with (document)
{
getElementById ('set_timer').style.display = 'none';
getElementById ('txt').innerHTML = 'До конца света осталось';
getElementById ('timer').style.display = 'block';
getElementById ('stop_timer').style.display = 'inline';
}
TIMER = setTimeout ('FuncTimer ()', 1000);
}
function FuncTimer ()
{
var cT = parseInt (new Date ().valueOf () / 1000, 10);
var cDv = _CD.innerHTML, cHv = _CH.innerHTML, cMv = _CM.innerHTML, cSv = _CS.innerHTML;
if (cT <= FINAL)
{
cSv = (cSv != 0) ? --cSv : 59;
if (cSv == 59) cMv = (cMv != 0) ? --cMv : 59;
if (cSv == 59 && cMv == 59) cHv = (cHv != 0) ? --cHv : 23;
if (cSv == 59 && cMv == 59 && cHv == 23 && cDv != 0) --cDv;
}
else
{
document.getElementById ('txt').innerHTML = 'После конца света прошло';
document.getElementById ('timer').style.color = 'red';
cSv = (cSv != 59) ? ++cSv : 0;
if (cSv == 0) cMv = (cMv != 59) ? ++cMv : 0;
if (cSv == 0 && cMv == 0) cHv = (cHv != 23) ? ++cHv : 0;
if (cSv == 0 && cMv == 0 && cHv == 0 && cDv) ++cDv;
}
_CS.innerHTML = cSv; _CM.innerHTML = cMv;
_CH.innerHTML = cHv; _CD.innerHTML = cDv;
TIMER = setTimeout ('FuncTimer ()', 1000);
}
function FuncStopTimer ()
{
clearTimeout (TIMER); FINAL = 0;
SD_.value = ''; SH_.value = ''; SM_.value = ''; SS_.value = '';
with (document)
{
cookie = escape ('type=0+0; expires=1000');
getElementById ('timer').style.display = 'none';
getElementById ('timer').style.color = 'black';
getElementById ('stop_timer').style.display = 'none';
getElementById ('set_timer').style.display = 'block';
}
}
</script>
</head>
<body>
<div id="set_timer">
Установите продолжительность отсчёта:
<p>дни: <input id="sD">
<p>часы: <input id="sH">
<p>минуты: <input id="sM">
<p>секунды: <input id="sS">
<p><input type="button" value="Запустить обратный отсчёт" onclick="FuncSetTimer ()">
</div>
<div id="timer">
<span id="txt"></span>: <span id="cD"></span> дн., <span id="cH"></span> час., <span id="cM"></span> мин., <span id="cS"></span> сек.
</div>
<input id="stop_timer" type="button" value="Остановить отсчёт" onclick="FuncStopTimer ()">
</body>
</html>
|
Второй скрипт
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251">
<style>
#set_timer, #timer, #stop_timer {display: none}
#timer {color: black}
</style>
<script>
var FINAL, TIMER;
onload = function ()
{
with (document)
{
_CS = getElementById ('cS'); SS_ = getElementById ('sS');
_CM = getElementById ('cM'); SM_ = getElementById ('sM');
_CH = getElementById ('cH'); SH_ = getElementById ('sH');
_CD = getElementById ('cD'); SD_ = getElementById ('sD');
}
var dC = unescape (document.cookie);
if (dC.indexOf ('type=1') < 0)
{document.getElementById ('set_timer').style.display = 'block'; SD_.focus ()}
else
{
var pm = dC.split ('; ');
for (var j = 0, lj = pm.length; j < lj; j++)
if (pm [j].indexOf ('type=1+') == 0) {FINAL = pm [j].split ('+') [1]; break}
var cT = parseInt (new Date ().valueOf () / 1000, 10);
var d = FINAL - cT;
document.getElementById ('txt').innerHTML = (d >= 0) ? 'До конца света осталось' : 'После конца света прошло';
if (d < 0) {d *= -1; document.getElementById ('timer').style.color = 'red'}
var s = d % 60; d -= s; d /= 60; _CS.innerHTML = s;
var m = d % 60; d -= m; d /= 60; _CM.innerHTML = m;
var h = d % 24; d -= h; d /= 24; _CH.innerHTML = h; _CD.innerHTML = d;
with (document)
{
getElementById ('timer').style.display = 'block';
getElementById ('stop_timer').style.display = 'inline';
}
TIMER = setTimeout ('FuncTimer ()', 1000);
}
}
function FuncSetTimer ()
{
var sDv = SD_.value, sHv = SH_.value, sMv = SM_.value, sSv = SS_.value;
if (sDv.replace (/\d/g, '').length || sHv.replace (/\d/g, '').length ||
sMv.replace (/\d/g, '').length || sSv.replace (/\d/g, '').length) return;
var per = ((sDv) ? sDv : 0) * 24 * 60 * 60 + ((sHv) ? sHv : 0) * 60 * 60 +
((sMv) ? sMv : 0) * 60 + ((sSv) ? sSv : 0) * 1;
var cT = new Date ().getTime ();
FINAL = per + parseInt (cT / 1000, 10);
document.cookie = escape ('type=1+' + FINAL + '; expires=' + (cT + 180 * 24 * 60 * 60* 1000));
_CS.innerHTML = (sSv) ? sSv : 0; _CM.innerHTML = (sMv) ? sMv : 0;
_CH.innerHTML = (sHv) ? sHv : 0; _CD.innerHTML = (sDv) ? sDv : 0;
with (document)
{
getElementById ('set_timer').style.display = 'none';
getElementById ('txt').innerHTML = 'До конца света осталось';
getElementById ('timer').style.display = 'block';
getElementById ('stop_timer').style.display = 'inline';
}
TIMER = setTimeout ('FuncTimer ()', 1000);
}
function FuncTimer ()
{
var cT = parseInt (new Date ().valueOf () / 1000, 10);
var cDv = _CD.innerHTML, cHv = _CH.innerHTML, cMv = _CM.innerHTML, cSv = _CS.innerHTML;
if (cT <= FINAL)
{
cSv = (cSv != 0) ? --cSv : 59;
if (cSv == 59) cMv = (cMv != 0) ? --cMv : 59;
if (cSv == 59 && cMv == 59) cHv = (cHv != 0) ? --cHv : 23;
if (cSv == 59 && cMv == 59 && cHv == 23 && cDv != 0) --cDv;
}
else
{
document.getElementById ('txt').innerHTML = 'После конца света прошло';
document.getElementById ('timer').style.color = 'red';
cSv = (cSv != 59) ? ++cSv : 0;
if (cSv == 0) cMv = (cMv != 59) ? ++cMv : 0;
if (cSv == 0 && cMv == 0) cHv = (cHv != 23) ? ++cHv : 0;
if (cSv == 0 && cMv == 0 && cHv == 0 && cDv) ++cDv;
}
_CS.innerHTML = cSv; _CM.innerHTML = cMv;
_CH.innerHTML = cHv; _CD.innerHTML = cDv;
TIMER = setTimeout ('FuncTimer ()', 1000);
}
function FuncStopTimer ()
{
clearTimeout (TIMER); FINAL = 0;
SD_.value = ''; SH_.value = ''; SM_.value = ''; SS_.value = '';
with (document)
{
cookie = escape ('type=0+0; expires=1000');
getElementById ('timer').style.display = 'none';
getElementById ('timer').style.color = 'black';
getElementById ('stop_timer').style.display = 'none';
getElementById ('set_timer').style.display = 'block';
}
}
</script>
</head>
<body>
<br>
<table border="1" width="65%">
<tr>
<td width="193">
<p align="center">Наименование</td>
<td align="center">Ваня</td>
<td align="center">Петя</td>
</tr>
<tr>
<td width="193">1)<span lang="ru"> сайт № 1 <a href="http://ya.ru/">ya.ru</a></span></td>
<td align="center">
<div id="set_timer">
Установите продолжительность отсчёта:
<br>д: <input id="sD" size="1">
ч: <input id="sH" size="1">
м: <input id="sM" size="1">
с: <input id="sS" size="1">
<p><input type="button" value="отсчёт" onclick="FuncSetTimer ()">
</div>
<div id="timer">
<span id="txt"></span>: <span id="cD"></span> дн., <span id="cH"></span> час., <span id="cM"></span> мин., <span id="cS"></span> сек.
</div>
<input id="stop_timer" type="button" value="Остановить отсчёт" onclick="FuncStopTimer ()">
</td>
<td align="center">
<div id="set_timer1">
Установите продолжительность отсчёта:
<br>д: <input id="sD" size="1">
ч: <input id="sH" size="1">
м: <input id="sM" size="1">
с: <input id="sS" size="1">
<p><input type="button" value="отсчёт" onclick="FuncSetTimer ()">
</div>
<div id="timer1">
<span id="txt1"></span>: <span id="cD1"></span> дн., <span id="cH1"></span> час., <span id="cM1"></span> мин., <span id="cS1"></span> сек.
</div>
<input id="stop_timer1" type="button" value="Остановить отсчёт" onclick="FuncStopTimer ()">
</td>
</tr>
<tr>
<td width="193"><span lang="ru">2) сайт №2 <a href="http://ya.ru/">ya.ru</a></span></td>
<td align="center"><input type="text" name="T2" size="14" value="03 д 20:30:05 "><span lang="ru"> </span>
<input type="button" value="отсчет" name="B4"></td>
<td align="center"><input type="text" name="T4" size="14" value="00 д 01:50:05 "><span lang="ru"> </span>
<input type="button" value="отсчет" name="B6"></td>
</tr>
</table>
</body>
</html>
|
| |
