Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице

Javascript-форум (https://javascript.ru/forum/)
-   Работа (https://javascript.ru/forum/job/)
-   -   Таймер отсчета времени с кнопками (https://javascript.ru/forum/job/25679-tajjmer-otscheta-vremeni-s-knopkami.html)

denisich84 12.02.2012 18:11
Таймер отсчета времени с кнопками
 
Вот есть пример таймера, при обновлении страницы таймер продолжает отсчет времени, при закрытии браузера таймер сбивается.
Нужно сделать чтобы при обновлении страницы и при новом открытии браузера таймер продолжал свой отсчет.
Пример: я зашел на страницу в 12 часов дня установил в поле часы число 24 и нажал на кнопку "запустить обратный отсчет", закрыл браузер, выключил комп, прихожу через час включаю комп захожу на страницу и вижу что таймер показывает уже 23 часа и продолжает отсчет.
Также нужно сделать чтобы на странице можно было запустить несколько таймеров не зависящих друг от друга.
Скрипт будет вставлен на html странице, php мне НЕ НАДО без всяких баз данных.
На втором коде показано как примерно должна выглядеть страница в рабочем состоянии.

Мой ящик Denisich84@mail.ru
Цена в районе 300WMR

1 скрипт 

<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>

denisich84 12.02.2012 18:11
2.
<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">&nbsp; </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">&nbsp; </span>
<input type="button" value="отсчет" name="B6"></td>
</tr>
</table>
</body>

</html>

Gvozd 13.02.2012 08:14
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

розовый слоник 13.02.2012 13:39
Цена в районе 300WMR - могу только дать совет как это сделать:)
для затравки это делается через куки

denisich84 13.02.2012 16:06
Цитата:
Сообщение от розовый слоник (Сообщение 157144)
Цена в районе 300WMR - могу только дать совет как это сделать:)
для затравки это делается через куки
Вау ты крут, ты блеснул интеллектом :yes: А то я без тебя не знаю что это делается через куки:-E

denisich84 13.02.2012 16:11
Цитата:
Сообщение от Gvozd (Сообщение 157100)
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[js]
... ваш код...
[/js]


О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Выделил:) Так пойдет?Правильно?;)

denisich84 13.02.2012 16:12
Не надо мне давать интуитивно понятные советы я не даун и не много разбираюсь во всем этом. А дурацкие советы меня просто бесят :-E
Таймер уже предложили написать, точно не знаю напишут или нет но пообещали

Gvozd 13.02.2012 16:37
Цитата:
Сообщение от denisich84
Выделил Так пойдет?Правильно?
Да.
Большое спасибо.
Цитата:
Сообщение от denisich84
Не надо мне давать интуитивно понятные советы я не даун и не много разбираюсь во всем этом. А дурацкие советы меня просто бесят
Извините, но тут сидят не телепаты, чтобы знать ваш уровень, и насколько вы разбираетесь.
Пожалуйста отнеситесь спокойней к советам.

denisich84 13.02.2012 22:01
Вопрос остается открытым! Пишите!

Gvozd 14.02.2012 00:28
Цитата:
Сообщение от denisich84
Вопрос остается открытым! Пишите!
Сумму в 300 WMR считаю недостаточной.
Готов взяться за 30 WMZ. Работаю по протекции.
Если моя сумма вас устраивает, напишите в ПМ с указанием контактов(ICQ, Skype) для живого общения


Часовой пояс GMT +3, время: 19:24.
Страница 1 из 2 1 2 >
Показывать 40 сообщений этой темы на одной странице