Страницы

Поиск по вопросам

среда, 13 февраля 2019 г.

Создание таймера до момента во времени [закрыт]

Помогите создать таймер, вот с таким дизайном:

Кода на 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); }

15:48:27



Ответ

В принципе можно так:
function timer() { time_rest = ((time_rest < 0) ? 0: time_rest - 1); var hours = Math.floor(time_rest / 3600); var minutes = Math.floor((time_rest - (hours * 3600)) / 60); var seconds = Math.floor((time_rest - ((hours * 3600) + (minutes * 60)))); if(hours < 10) { hours = "0" + hours; } if(minutes < 10) { minutes = "0" + minutes; } if(seconds < 10) { seconds = "0" + seconds; } document.getElementsByClassName("hours")[0].innerHTML = hours; document.getElementsByClassName("minutes")[0].innerHTML = minutes; document.getElementsByClassName("seconds")[0].innerHTML = seconds; if(time_rest == 0) { //location.reload(); // обновляем страницу, если время вышло (скрыл для теста) } } var time_now = new Date().getTime() / 1000; // текущее время в формате timestamp var time_to = new Date("21 June 2016 22:33:44").getTime() / 1000; // финальное время в формате timestamp var time_rest = Math.floor(time_to - time_now); // сколько осталось секунд до финального времени в формату timestamp // делим на 1000, т.к. ответит приходит в миллисекундах timer(); setInterval(function() { timer(); }, 1000); .timer { width: 300px; text-align: center; color: #98001A; font-size: 30px; font-family: Arial; } .timer .title { font-size: 15px; color: #000; } .timer .hours, .timer .minutes, .timer .seconds { display: inline; padding: 1.6px; } .timer .colon { display: inline; }

До конца акции осталось:
00
:
00
:
00

Комментариев нет:

Отправить комментарий