Помогите создать таймер, вот с таким дизайном:
Кода на 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;
}
Комментариев нет:
Отправить комментарий