<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Обратный отчёт</title>
<meta http-equiv="X-UA-Compatible" content=" IE=edge, chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
</head>
<body>
<style>
/*Немного стилей*/
html, body {
height: 100%;
}
body {
text-align: center;
background: linear-gradient(#E91E63, #9C27B0); /*фон*/
font-family: sans-serif;
}
h1 {
color: #000;
font-weight: 100;
font-size: 40px;
margin: 40px 0px 20px;
}
.clock {
color: #fff;
display: inline-block;
text-align: center;
font-size: 30px;
}
.clock > div {
padding: 10px;
border-radius: 3px;
background: rgba(0, 0, 0, 0.7);
display: inline-block;
}
.clock div > span {
padding: 15px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.2);
display: inline-block;
}
.smalltext {
padding-top: 5px;
font-size: 16px;
}
</style>
<!-- шаблон для каждого счётчика -->
<template id="countdown">
<h1></h1>
<div class="clock">
<div>
<span class="days">00</span>
<div class="smalltext">дни</div>
</div>
<div>
<span class="hours">00</span>
<div class="smalltext">часы</div>
</div>
<div>
<span class="minutes">00</span>
<div class="smalltext">минуты</div>
</div>
<div>
<span class="seconds">00</span>
<div class="smalltext">секунды</div>
</div>
</div>
</template>
<!-- вывод на страницу -->
<div id="countdown-list"></div>
<script>
(function() {
var template = document.getElementById("countdown");
var countdownList = document.getElementById("countdown-list");
// данные таймеров
var times = [{
time: 1546293600000, //дата, к которой стремимся
description: "Новый 2019 год"
}, {
time: 1808254800000,
description: "21 апреля 2027 года"
}]; // здесь можно и больше дат...
// запускаем часики
initializeClock(times);
// это ты уже видел в предыдушем посте
function getTimeRemaining(endtime) {
var t = new Date(endtime) - new Date();
var seconds = Math.floor((t / 1000) % 60);
var minutes = Math.floor((t / 1000 / 60) % 60);
var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
var days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}
// вставляет на станицу шаблон нужное кол-во раз
function initializeClock(times) {
times.forEach(function(deadline) {
var countdownListItem = template.content.cloneNode(true);
countdownListItem.querySelector("h1").textContent = deadline.description;
deadline.elements = "days hours minutes seconds".split(" ").map(function(value) {
return {
element: countdownListItem.querySelector("." + value),
type: value
};
});
countdownList.appendChild(countdownListItem);
});
// и запускает обновление часиков
updateClock(times);
}
function updateClock(times) {
times.forEach(function(deadline) {
var t = getTimeRemaining(deadline.time);
if(t.total < 0) return;
deadline.elements.forEach(function(part) {
part.element.textContent = t[part.type];
});
});
setTimeout(function() {
// и опять и опять...
updateClock(times);
}, 500);
}
// такие уж бредо часики получились(
})();
</script>
</body>
</html>
