Пишем разметку HTML:
Пишем стиль:
Пишем jquery:
Смотрим наш результат:
HTML:
<div class="container">
<h1 class="intro">С новым годом 2019</h1>
<div class="countdown-wrapper">
<div class="days time-el">
<output id="days"></output>
<label for="days">DAY(S)</label>
</div>
<div class="hours time-el">
<output id="hours"></output>
<label for="hours">HOUR(S)</label>
</div>
<div class="minutes time-el">
<output id="minutes"></output>
<label for="minutes">MINUTE(S)</label>
</div>
<div class="seconds time-el">
<output id="seconds"></output>
<label for="seconds">SECOND(S)</label>
</div>
</div>
</div>
CSS:
@import url('https://fonts.googleapis.com/css?family=Limelight|Mada');
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #000;
}
.container {
width: 750px;
text-align: center;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-family: 'Mada', sans-serif;
}
.intro {
margin: 5% auto;
color: #9e8686;
}
.countdown-wrapper {
display: flex;
justify-content: space-around;
margin: 5% auto;
color: #7e8c6a;
}
label,
output,
.time-el span {
display: block;
}
.time-el .digit{
position: relative;
width: 70px;
height: 100px;
display: inline-block;
font-size: 90px;
line-height: 100px;
font-family: 'Limelight', cursive;
border: 2px solid;
margin: 4px;
border-radius: 5px;
}
.inner {
height: 200%;
width: 100%;
position: absolute;
}
.top .inner {
top: 0;
}
.bottom .inner {
bottom: 0;
}
.time-el .top, .time-el .bottom {
position: absolute;
left: 0;
height: 50%;
width: 100%;
overflow: hidden;
}
.time-el .top {
top: 0;
transform-origin: 50% 100%;
}
.time-el .bottom {
bottom: 0;
transform-origin: 50% 0%;
}
.time-el label{
font-size: 10px;
letter-spacing: 1px;
color: #9e8686;
}
JavaScript:
var targetTime = new Date("Jan 1, 2019");
var seconds = 1000;
var minutes = seconds * 60;
var hours = minutes * 60;
var days = hours * 24;
var $daysEl = $(".time-el #days");
var $hoursEl = $(".time-el #hours");
var $minutesEl = $(".time-el #minutes");
var $secondsEl = $(".time-el #seconds");
function startCountDown() {
updateTick();
var timeInterval = setInterval(updateTick, seconds);
function updateTick() {
var timeLeft = Date.parse(targetTime) - Date.parse(new Date());
var spanContent = '<span class="digit"><span class="top"><span class="inner">$1</span></span><span class="bottom"><span class="inner">$1</span></span></span>';
$daysEl.html(Math.floor(timeLeft / days)).html(function (i, digit) {return digit.replace(/(\d)/g, spanContent);});
$hoursEl.html(("0" + Math.floor(timeLeft % days / hours)).slice(-2)).html(function (i, digit) {return digit.replace(/(\d)/g, spanContent);});
$minutesEl.html(("0" + Math.floor(timeLeft % hours / minutes)).slice(-2)).html(function (i, digit) {return digit.replace(/(\d)/g, spanContent);});
$secondsEl.html(("0" + Math.floor(timeLeft % minutes / seconds)).slice(-2)).html(function (i, digit) {return digit.replace(/(\d)/g, spanContent);});
if (timeLeft <= 0) clearInterval(timeInterval);
}
}
$(function () {
startCountDown();
});