Обратный таймер
Привет всем!
В javascript профан, нужна очень помощь. Нужен скрипт таймера обратного отсчета(час, минута, секунда) с кнопкой пауза! Облазил весь интернет ничего подходящего найти не смог!:help: |
вам как удобнее, водить в функцию время с которого начнется обратный отсчет таймера? или вводить в функцию дату до которой будет отсчитывать таймер)?
|
Цитата:
|
Цитата:
ответь на вопрос?! |
Цитата:
|
СУТЬ ТАКОВА)!
есть обьект timer в него передается 2 аргумента 1) время которое нужно отсчитывать 2) функция которая будет выполняться каждую секунду timer(время, функция); время передается массивом, часы минуты секунды [1,15, 42] 1 час 15 минут 42 секунды. [0,0,10] 0 часов 0 минут 10 секунд. timer([0,0,10], функция) в нашу функцию будут передаваться 3 параметра, часы минуты и секунды обратного отсчета. и их можно естественно использовать внутри её. то есть нужно писать так timer([0,0,10] , function(часы, минуты, секунды) { alert(часы) } ) обьект timer имеет методы pause() и start() просто нужно написать timer.pause() // приостановка timer.start() // запуск с приостановленного места
function timer(_time, _call){
timer.lastCall = _call
timer.lastTime = _time
timer.timerInterval = setInterval(function(){
_call(_time[0],_time[1],_time[2]);
_time[2]--
if(_time[0]==0 && _time[1]==0 && _time[2]==0){
timer.pause()
_call(0,0,0);
}
if(_time[2]==0){
_time[2] = 59
_time[1]--
if(_time[1]==0){
_time[1] = 59
_time[0]--
}
}
timer.lastTime = _time
}, 1000)
}
timer.pause = function(){
clearInterval(timer.timerInterval)
}
timer.start = function(){
timer(timer.lastTime, timer.lastCall)
}
//сверху мое, а тут уже ваше)
//тут мы начинаем таймер. передаем массив с временем и функцию которая будет вызываться каждую секунду
timer([0,0,7], function(h,m,s){
alert(h + ':' +m + ':' +s) // алертнуть часы минуты и секунды
})
timer.pause()
timer.start()
|
Цитата:
Чтобы вывести время например в <input> Что мне необходимо сделать(ну или в div) Для вывзова функции остановки и запуска таймера мне достаточно в свойстве кнопки указать <input onclick="timer.pause()" type="button" /> ? |
Тоже сделал вариант. В связи с чем вопрос: я задаю время в миллисекундах (30 сек), т.е. по идее должно отображаться только 30 сек. Откуда там 3 часа берется?)))
p.s.: с датой работаю буквально второй раз :)
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
</style>
<script type="text/javascript">
var x = new Date().getTime() + 30000;
function backTimer() {
var j = document.getElementsByTagName('div')[0];
var i = new Date().getTime();
if(i < x) {
j.innerHTML = new Date(x - i).toLocaleTimeString();
setTimeout(backTimer, 500);
} else {
j.innerHTML = "00:00:00";
}
}
</script>
</head>
<body onload="backTimer();">
<div></div>
</body>
</html>
|
Цитата:
timer([0,0,30], function(h,m,s){
//вот тут время у тебя доступно как
//h - часы
//m - минуты
//s - секунды
})
|
nerv_,
Потому, что у тебя видимо локальное время +3 стоит, у меня вот +4 и у меня 4 часа показываться) |
Livanderiaamarum,
Я бы не стал работать с вами и вашим кодом, он не читабелен вообще и от этого ужасен. Пусть даже возможно и правильный. |
Солидарен с Nekromancer.
|
Цитата:
п.с. аа ну да. у нас же разные уровни)) в том примере я не обьяснял человеку как нужно сделать. а сделал самый оптимальный и гибкий вариант) и дал ему интерфейс. Вам естественно ничего не понятно) вы же не понимаете как устроен этот паттерн. советую подтянуть ваш javascript чтобы работать со мной на одном уровне) |
Цитата:
|
Цитата:
но ведь там знание событий браузеров, а тут javascript/ связь? аа, вы как я понимаю только браузерный js учили с детства))? только сайтики клепать способны да)? наверное каждый косяк ИЕ выучили)? это похвально) даже наверное не знаете что js бывает не только в браузерах)? да о чем я говорю. не тот уровень) |
Ребята давайте не будем кормить троля. Этот конечно потоньше чем некоторые но всё же.)
|
Цитата:
|
Вроде как слепил. Для начала обычный таймер
<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 Timer = (function() {
var now, tm, offset = 0, i = 0;
return function() {
switch(arguments[0]) {
case true:
if(offset === 0) {
now = new Date();
offset = now.getTimezoneOffset() * 60000;
}
else {
return ;
}
break;
case false:
if(offset !== 0) {
clearTimeout(arguments.callee);
i = tm.getTime() - offset;
offset = 0;
}
}
if(offset !== 0) {
tm = new Date((new Date()).getTime() - now.getTime() + offset + i);
document.getElementsByTagName('div')[0].innerHTML = tm.toLocaleTimeString();
setTimeout(arguments.callee, 500);
}
}
})();
</script>
</head>
<body>
<input type="button" onclick="Timer(true)" value="Start">
<input type="button" onclick="Timer(false);" value="Pause">
<div>Div HTML</div>
</body>
</html>
|
Обратный таймер. Наверное можно сделать проще, но у меня получилось так :)
//в этой строке время выставляется в часах(0), минутах(0), секундах(30) и миллисекундах(0) var x = (0 * 3600000) + (0 * 60000) + (30 * 1000) + 0;
<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 backTimer = (function() {
var x = (0 * 3600000) + (0 * 60000) + (30 * 1000) + 0;
var now, tm, offset = 0, i = 0;
return function() {
switch(arguments[0]) {
case true:
if(offset === 0) {
now = new Date();
offset = now.getTimezoneOffset() * 60000;
}
else {
return ;
}
break;
case false:
if(offset !== 0) {
clearTimeout(arguments.callee);
i = x - tm.getTime() + offset;
offset = 0;
}
}
if(offset !== 0) {
tm = new Date((new Date()).getTime() - now.getTime() + i);
if(tm.getTime() < x) {
tm.setTime(x - tm.getTime() + offset);
document.getElementsByTagName('div')[0].innerHTML = tm.toLocaleTimeString();
setTimeout(arguments.callee, 500);
}
else {
clearTimeout(arguments.callee);
tm.setTime(0 + offset);
document.getElementsByTagName('div')[0].innerHTML = tm.toLocaleTimeString();
offset = 0;
i = 0;
}
}
}
})();
</script>
</head>
<body>
<input type="button" onclick="backTimer(true)" value="Start">
<input type="button" onclick="backTimer(false);" value="Pause">
<div>Div HTML</div>
</body>
</html>
|
Цитата:
|
trikadin, приветствую) Заодно с конструкцией switch(х) познакомился :)
|
Цитата:
Знакомство - хорошо, но её использование, на мой взгляд, в данном контексте не очень оправдано... |
nerv_,
Вариант ...
<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 = new Date,s,n;
t.setHours(0, 0, 0, 0);
function Timer() {
t = new Date(t.getTime() + (new Date).getTime() - s.getTime());
document.getElementsByTagName("div")[0].innerHTML = t.toLocaleTimeString();
s = new Date;
n = setTimeout(arguments.callee, 500)
}
function New_start() {
t.setHours(0, 0, 0, 0);
s = new Date;
Timer()
}
function Pause() {
s ? (window.clearTimeout(n), s = !1) : (s = new Date, Timer())
};
</script>
</head>
<body>
<input type="button" onclick="New_start()" value="Start/New">
<input type="button" onclick="Pause();" value="Pause/Go">
<div>Div HTML</div>
</body>
</html>
|
Вариант с прямым или обратным отсчётом ...
<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 = new Date,f = 1,s,n;
t.setHours(0, 0, 0, 0);
function Timer() {
t = new Date(t.getTime() + f*((new Date).getTime() - s.getTime()));
document.getElementsByTagName("div")[0].innerHTML = t.toLocaleTimeString();
s = new Date;
n = setTimeout(arguments.callee, 500)
}
function New_start() {
t.setHours(0, 0, 0, 0);
s = new Date;
Timer()
}
function Pause() {
s ? (window.clearTimeout(n), s = !1) : (s = new Date, Timer())
};
function BackTimer()
{
f = -f
}
</script>
</head>
<body>
<input type="button" onclick="New_start()" value="Start/New">
<input type="button" onclick="Pause();" value="Pause/Go">
<input type="button" onclick="BackTimer();" value="BackTimer">
<div>Div HTML</div>
</body>
</html>
|
:write:
Вариант с установкой секунд ... )))
<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 = new Date,f = 1,s,n;
t.setHours(0, 0, 0, 0);
function Timer() {
t = new Date(t.getTime() + f*((new Date).getTime() - s.getTime()));
document.getElementsByTagName("div")[0].innerHTML = t.toLocaleTimeString();
s = new Date;
n = setTimeout(arguments.callee, 500)
}
function New_start() {
window.clearTimeout(n);
t.setHours(0, 0, 0, 0);
s = new Date;
Timer()
}
function Pause() {
s ? (window.clearTimeout(n), s = !1) : (s = new Date, Timer())
};
function BackTimer()
{
window.clearTimeout(n);
f = -f;
s = new Date;
Timer()
}
function Set()
{
var sec = parseInt(document.getElementById("sec").value, 10)||0
t.setHours(0, 0, sec, 0);
document.getElementsByTagName("div")[0].innerHTML = t.toLocaleTimeString();
}
</script>
</head>
<body>
<input type="button" onclick="New_start()" value="Start/New">
<input type="button" onclick="Pause();" value="Pause/Go">
<input type="button" onclick="BackTimer();" value="BackTimer">
<input type="button" onclick="Set();" value="Set">
<label><input type="text" value="30" id="sec">sec</label>
<div>Div HTML</div>
</body>
</html>
|
Вариант с прямым и обратным отсчётом, с установкой секунд, минут, часов, дней, недель, месяцев и лет, с сапёром и змейкой, с aero, с функцией gps, со звуками, распознаванием голоса и искусственным интеллектом ... ... и, наконец, с блэкджеком и шлюхами.
/* щутка)) */ |
Aetae, и главное, он написан на jquery !
|
Цитата:
|
Цитата:
могёш) |
рони, благодарю) Теперь я понял, что делал неправильно -- все :lol: Объясните, пожалуйста, на примере вашей первой функции, как сделать так, чтобы в глобальной области видимости находилась только одна функция, а не кол-во функций + кол-во глобальных переменных?
|
Цитата:
var global, globalMethod; // объявляем глобальные переменные
(function(){ // создаём анонимную ф-цию
var local= 2; // локальная переменная
global= 3;
globalMethod= function() {
alert(local + " + " + global + " = " + (local+global));
};
})() // вызываем анонимную ф-цию
globalMethod();
alert(local);
|
trikadin, очередное мерси :yes: Вроде как пример простой и на первый взгляд понятный, но я все равно пару раз прогнал его в отладчике пошагово, чтобы в голове отложилось :) Кажется, понял, почему у меня не получалось) Если не ошибаюсь, тут используется т.н. "статическая приватная" переменная благодаря замыканию анонимной ф-ции на globalMethod.
|
Полезно будет почитать про фабрики объектов - суть примерно та же.
|
Цитата:
<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>
|
я ща спать, а завтра сделаю самый лучший таймер из всех возможных))
|
Это невозможно! Нужно тогда брать конкретное время, и отсчитывать.
|
Цитата:
|
рони, благодарю! :yes: Разрешите полюбопытствовать, почему Вы обращаетесь к методам этим способом
<input type="button" onclick="T['New_start']()" value="Start/New"> // а не этим? <input type="button" onclick="T.New_start();" value="Start/New"> |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 16:55. |