| denisich84 |
10.02.2012 16:13 |
Таймер обратного отсчета времени с кнопками
Перерыв инет ни чего подходящего не нашел:cray: Случайно наткнулся на этот сайт и вроде люди тут толковые:thanks:
Прошу помочь с проблемкой. Нашел на этом форуме скрипт таймера:
Код:
<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> <span id="clock1" style="width:450px; font-size:10px"></span> </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>Часы: <script type="text/javascript">generate_list ('hour0',0,1,50,1);</script></td>
<td>Минуты: <script type="text/javascript">generate_list ('min0',0,1,59,0);</script></td>
<td>Секунды: <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>
|
