Đồng hồ đếm ngược

  Bài viết hay nhất1
HTML:


<h1>Countdown Clock</h1>
<div id="clock">
<div class="time">
<span class="days"></span>
<div class="text">Days</div>
</div>
<div class="time">
<span class="hours"></span>
<div class="text">Hours</div>
</div>
<div class="time">
<span class="minutes"></span>
<div class="text">Minutes</div>
</div>
<div class="time">
<span class="seconds"></span>
<div class="text">Seconds</div>
</div>
</div>



CSS:


body {
font-family: arial, helvetica, sans-serif;
font-size: 1.5em;

#clock {
&:after {
content: '';
clear: both;
height: 0;
visibility: hidden;
}
.time {
background: #00BF96;
border-radius: 3px;
display: inline-block;
padding: 10px;
text-align: center;
width: 115px;
span {
background: #00816A;
border-radius: 3px;
display: inline-block;
padding: 15px;
}
.seconds {
width: 25px;
}
}
}
}




JS:


(function() {
'use strict';

var deadline = '2020-12-31';

initializeClock('clock', deadline);

//Initialize clock
function initializeClock(id, endtime) {
var clock = document.getElementById(id);
updateClock(endtime);
var timeinterval = setInterval(function() {
var t = getTimeRemaining(endtime);
updateClock(endtime);

if ( t.total <= 0) {
clearInterval(timeinterval);
}
}, 1000);
}

//Calculate time remaining
function getTimeRemaining(endtime) {
var t = Date.parse(endtime) - Date.parse(new Date());
var days = Math.floor( t/(1000*60*60*24) );
var hours = Math.floor( (t/(1000*60*60)) % 24 );
var minutes = Math.floor( (t/1000/60) % 60 );
var seconds = Math.floor( (t/1000) % 60 );

return {
'total': t,
'days': days,
'hours': hours,
'minutes': minutes,
'seconds': seconds
};
}

function updateClock(endtime) {
var t = getTimeRemaining(endtime);
var daysSpan = clock.querySelector('.days');
var hoursSpan = clock.querySelector('.hours');
var minutesSpan = clock.querySelector('.minutes');
var secondsSpan = clock.querySelector('.seconds');

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = t.hours;
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
}
})();
Bạn không có quyền trả lời bài viết