Таймер на JavaScript
Описание: Недавно меня попросили показать скрипт таймера на JavaScript, который у меня частенько появляется на моих платных курсах. Поскольку задача достаточно популярная, то я решил выложить код этого простого скрипта, чтобы любой мог сделать у себя на сайте таймер на JavaScript. Начальное значение таймера задаётся в HTML-коде.
Результат:
01:10:00
Код JavaScript (вставлять между тегами <head> и </head>):
<script type="text/javascript">
function startTimer() {
var my_timer = document.getElementById("my_timer");
var time = my_timer.innerHTML;
var arr = time.split(":");
var h = arr[0];
var m = arr[1];
var s = arr[2];
if (s == 0) {
if (m == 0) {
if (h == 0) {
alert("Время вышло");
window.location.reload();
return;
}
h--;
m = 60;
if (h < 10) h = "0" + h;
}
m--;
if (m < 10) m = "0" + m;
s = 59;
}
else s--;
if (s < 10) s = "0" + s;
document.getElementById("my_timer").innerHTML = h+":"+m+":"+s;
setTimeout(startTimer, 1000);
}
</script>
Код HTML (вставлять между тегами <body onload="startTimer()"> и </body>):
<p><span id="my_timer" style="color: #f00; font-size: 150%; font-weight: bold;">01:10:00</span></p> -
Создано 03.12.2012 10:27:55
-
Михаил Русаков
Комментарии (27):
Михаил, напишите пожалуйста статью про то как изменить время на сайте, всмысле чтобы было время украинское а не серверное... Просто сервер находиться России а я живу в Украине
Ответить
Хорошо, напишу. Скорее всего, через 2 недели будет данная статья.
Ответить
А я думал, что это целая наука!
Ответить
А как сделать чтобы время при обновлении страницы не обновлялось и не начинало отсчитывалось сначала
Ответить
Нужно как-то в PHP подставлять вместо этого 01:10:00 что-то другое. А что именно зависит от задачи.
Ответить
извините за беспокойство но вот ломаю голову над тем как задержать выполнение данной функции на пару секунд function dinamic(str) { var x = 0; var id = setInterval(dynam,80); function dynam() { document.getElementById("din").innerHTML += str.charAt(x); x++ if(x == string.length) clearInterval(id); } } возможно ли ето сделать с помощю оператора setTimeout и как в данном случае? заранее благодарен за помощь
Ответить
Сделать вызов setTimeout за пределами функции. В параметре setTimeout указать эту функцию и задержку в 2 секунды.
Ответить
<script language = "javascript"> setTimeout(dinamic(str),2000); function dinamic (str){ var x = 0; var id = setInterval(dynam,80); function dynam() { document.getElementById("din").innerHTML += str.charAt(x); x++ if(x == string.length) clearInterval(id); } } </script> извините за назойливость но вроде все сделал как сказали, а результата нет. :-( В чем ошыбка? Не пинайте сильно "чайника"
Ответить
Неправильно вызывается setTimeout, точнее первый параметр. Посмотрите в справочнике, как надо указывать первый параметр.
Ответить
пробовал все варианты. справочник читал. setTimeout(dinamic(), 2000) setTimeout(dinamic, 2000) setTimeout(dinamic(str), 2000) var timeout_id = setTimeout(dinamic(str), 2000) var timeout_id = setTimeout(dinamic(), 2000) не работает. из ваших подсказок понял что проблема в вызове dinamic. но не могу найти решение. я ее по разному записывал.
Ответить
"dinamic" надо писать.
Ответить
Михаил, а как сделать так, чтобы таймер работал не с определенного млмента, а до определенного момента. Например, обратный отсчет до нового года
Ответить
А разница в чем? Вы просто вместо фиксированного начального времени должны будете вычислить сколько осталось до нужного момента, и передать в таймер.
Ответить
Нет, я имел ввиду можно ли сделать так, чтобы если перезагружаешь или заного заходишь на страницу, таймер вел отщет до определенного момента?
Ответить
Так и будет. Сейчас он сбрасывается только потому что время таймера каждый раз обновляется, а Вы должны подставлять новое вычисленное значение.
Ответить
Как вывести несколько таймеров на одной странице? При выводи каждого отдельно работает только 1. Т.е по порядку. Сначала тикает один как дотикает затем другой.
Ответить
Здравствуйте, вы не могли бы пояснить для новичков, что и где нужно сменить, чтобы сменилось время? Например: мне нужно чтобы шёл обратный отсчёт только в секундах, как такое реализовать? Заранее спасибо!
Ответить
убрать вообще часы и минуты? тогда нужно кусочки кода удалить
Ответить
Здравствуйте, хотелось бы узнать, например на странице есть 2 таких таймера. А как в body onload прописать ? через запятую ? <body onload="startTimer(), startTimerSecond()"> Так ?
Ответить
Здравствуйте, вызывайте таймеры каждый отдельно.
Ответить
Как вывести несколько таймеров на одной странице? При выводи каждого отдельно работает только 1. Т.е по порядку. Сначала тикает один как дотикает затем другой.
Ответить
Как сделать чтобы он сохранялся с "куки" Браузера?
Ответить
а можно как то на подобие это скрипта сделать одновременно несколько таймеров к примеру : <p><span id="my_timer1" style="color: #f00; font-size: 150%; font-weight: bold;">01:10:00</span></p> <p><span id="my_timer2" style="color: #f00; font-size: 150%; font-weight: bold;">01:15:00</span></p> ................ <p><span id="my_timer.....n" style="color: #f00; font-size: 150%; font-weight: bold;">01:20:00</span></p>
Ответить
Михаил, сделал таймер по аналогии с вашим. Но почему то он выдает 50 NaN и не двигается. Код на jsfiddle: http://jsfiddle.net/wLrdq997/
Ответить
Могу-ли я применить стили отдельно к часам, минутам и секундам? Т.е. я хочу разместить это в div'ах
Ответить
Как изменить время? Нужно в DIV изменить время.
Ответить
Здравствуйте Михаил. У меня возник вопрос - мне надо что бы когда время вышло появлялась ссылка, но как это сделать я не знаю.
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.