Javascript-форум - Показать сообщение отдельно - Таймер обратного отсчета времени с кнопками

denisich84 · #1 (**permalink**) 10.02.2012, 16:13

Перерыв инет ни чего подходящего не нашел

Случайно наткнулся на этот сайт и вроде люди тут толковые

Прошу помочь с проблемкой. Нашел на этом форуме скрипт таймера:

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Div HTML</title>
</head>
<body>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body { background-color:#ffcc33; margin:0px; }
			div { color:#0033cc; font:bold 12pt Tahoma; margin:15px; }
		</style>
		<script type="text/javascript">
  var T = {
    n: null,
    s: new Date,
    f: 1,
    t: new Date,
    Timer: function () {
        T.t = new Date(T.t.getTime() + T.f * ((new Date).getTime() - T.s.getTime()));
        document.getElementsByTagName("div")[0].innerHTML = T.t.toLocaleTimeString();
        T.s = new Date;
        T.n = setTimeout(function () {
            T.Timer()
        }, 500)
    },
    New_start: function () {
        clearTimeout(T.n);
        T.t.setHours(0, 0, 0, 0);
        T.s = new Date;
        T.Timer()
    },
    Pause: function () {
        T.s ? (clearTimeout(T.n), T.s = "") : (T.s = new Date, T.Timer())
    },
    BackTimer: function () {
        clearTimeout(T.n);
        T.f = -T.f;
        T.s = new Date;
        T.Timer()
    },
    Set: function () {
        var a = parseInt(document.getElementById("sec").value, 10) || 0;
        T.t.setHours(0, 0, a, 0);
        document.getElementsByTagName("div")[0].innerHTML = T.t.toLocaleTimeString()
    }
};
		</script>
	</head>
	<body>
		<input type="button" onclick="T['New_start']()" value="Start/New">
		<input type="button" onclick="T['Pause']()" value="Pause/Go">
        <input type="button" onclick="T['BackTimer']();" value="BackTimer">
        <input type="button" onclick="T['Set']();" value="Set">
        <label><input type="text" value="30" id="sec">sec</label>
        <div>Div HTML</div>
    </body>
</html>

С куками работать я не умею! Как сделать чтобы таймер не сбрасывался при обновлении страницы и при закрытии браузера, а продолжал отсчитывать время??? И на одной странице можно было расположить несколько таймеров?

И чтобы дату отсчета можно было вводить со страницы например как в этом скрипте:

Код:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Часы</title>
</head>

<body>
<div align="center">
<p>&nbsp;<span id="clock1" style="width:450px; font-size:10px"></span>&nbsp;</p>
</div>

<script type="text/javascript">
<!--
 var hour0=0; 
 var min0=0;
 var sec0=0;
 var timeId=null;
 
 function form2 (v) { return (v<10?'0'+v:v); }
 
 function changetime() {
  sec0--;
  if (sec0<0) {
   sec0=59;
   min0--;
   if (min0<0) {
    min0=59;
    if (hour0>0) hour0--;
    else { hour0=min0=sec0=0; }
   }
  }
 }
 
function showtime () {
  var t=hour0*3600+min0*60+sec0;
  if (t>0) {
   document.getElementById('clock1').innerHTML = form2(hour0)+':'+form2(min0)+':'+form2(sec0);
   changetime();
  }
  else if (t<1) {
   document.getElementById('clock1').innerHTML = '';
   window.clearTimeout (timeId);
   timeId=null;
  }
 }
 
 function inittime (hour,min,sec) {
  if (timeId) { 
   window.clearTimeout (timeId);
   timeId=null;
  }
  hour0=Math.max(hour,0); min0=Math.max(min,0); sec0=Math.max(sec,0);
  if (!timeId) { 
   timeId=window.setInterval("showtime();",1000);
  }
 }
// -->
</script>

<script type="text/javascript">
 function generate_list (name,min,step,max,deft) {
  document.writeln ('<select name="'+name+'" size="1">');
  for (var i=min; i<=max; i+=step) {
   document.write ('<option value="'+i+'"');
   if (i==deft) { document.write (' selected'); }
   document.writeln ('>'+(i<10?'0'+i:i)+'</option>');
  }
  document.writeln ('</select>');
 }
</script>
 
<div align="center">
 <form name="f1">
  <table align="center" width="90%" border="0" cellpadding="4" cellspacing="0"><tr>
   <td>Часы:&nbsp;<script type="text/javascript">generate_list ('hour0',0,1,50,1);</script></td>
   <td>Минуты:&nbsp;<script type="text/javascript">generate_list ('min0',0,1,59,0);</script></td>
   <td>Секунды:&nbsp;<script type="text/javascript">generate_list ('sec0',0,1,59,0);</script></td>
   <td><input type="button" value="Отсчёт" 
    onclick="inittime(
     document.f1.hour0.options[document.f1.hour0.selectedIndex].value,
     document.f1.min0.options[document.f1.min0.selectedIndex].value,
     document.f1.sec0.options[document.f1.sec0.selectedIndex].value);"></td>
  </tr></table>
 </form>
</div>
</body>
</html>