SHARE CODE | ĐẾM NGƯỢC NGÀY ĐẾN TẾT

Còn 3 tháng nữa là đến TẾT NGUYÊN ĐÁN 2019, Những bạn thích có một cái đồng hồ đếm ngược thời gian về Tết chính xác từng giây thì không khó đâu nhá. Code này mình thấy khá đẹp từ bên Tôi Share Blog. nên mình đã source và share lại cho các bạn.

Bạn vào bố cục của Blogger, thêm đoạn mã bên dưới vào trong HTML/JavaScript.

<!-- Countdown holiday -->
<style>
#countdown-holiday{float:left;width:108%;box-sizing:border-box;margin-top:53px}
#timer{padding-top:0}
#timer div{width:70px;height:70px;line-height:36px;z-index:199;background:#ee1b1e;border-radius:50%;text-align:center;font-size:20px;color:#fff;display:inline-block;float:left;text-shadow:0 0.2px 0.3px rgba(0, 0, 0, 0.353);border:5px solid rgba(255, 255, 255, 0.5490196078431373);margin:0 5px}
#timer div:nth-child(1),{margin-left:0}
#timer div:last-child{margin-right:0}
#timer h2{color:#222;}
.title-tet span{font-size:22px!important;font-weight:700;text-transform:uppercase;margin-bottom:20px;font-family:'Utm Avo',sans-serif}
#timer h2 span:before{content:'';display:block;width:10px;height:10px;background:#ee1b1e;position:absolute;bottom:0;left:0;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);left:calc(50% - 7.5px);bottom:-15px;z-index:3}
#timer h2 span:after{content:'';width:100%;border-bottom:2px solid #222;content:'';display:block;position:absolute;bottom:0;left:0;bottom:-10.5px;z-index:2}
#timer span{margin-bottom:20px;font-size:12px;display:block;transform:translate(0,-38%)}
#days,#hours,#minutes{color:#fb5182}
.title-tet strong{color:#ee1b1e}
@media screen and (max-width: 440px) {
#timer div{width:50px!important;height:50px!important;line-height:26px!important;font-size:15px!important}
#timer span{font-size:8px;transform:translate(0,-52%)!important}
.title-tet span{font-size:18px!important}
}
</style>
<div id='countdown-holiday'>
<div id='timer'>
<h2 class='title-tet'><span>Đếm ngược ngày đến <strong>tết</strong></span></h2>
<div id='days'></div>
<div id='hours'></div>
<div id='minutes'></div>
<div id='seconds'></div>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// Countdown holiday
let timeout = null;
function makeTimer() {
// Edit Here
//---- let endTime = new Date("'02/03/2019 23:59:59 GMT+0700 (SE Asia Standard Time)"); ----
let endTime = new Date("'02/05/2019 23:59:59 GMT+0700 (SE Asia Standard Time)");
endTime = (Date.parse(endTime) / 1000);






let now = new Date();
now = (Date.parse(now) / 1000);






let timeLeft = endTime - now,
days = Math.floor(timeLeft / 86400),
hours = Math.floor((timeLeft - (days * 86400)) / 3600),
minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600)) / 60),
seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));






if (hours === 0 && minutes === 0 && seconds === 0) {
clearTimeout(timeout);
} else {
if (hours < "10") {
hours = "0" + hours;
}
if (minutes < "10") {
minutes = "0" + minutes;
}
if (seconds < "10") {
seconds = "0" + seconds;
}
$("#days").html(days + "<span>Ngày</span>");
$("#hours").html(hours + "<span>Giờ</span>");
$("#minutes").html(minutes + "<span>Phút</span>");
$("#seconds").html(seconds + "<span>Giây</span>");
timeout = setTimeout(makeTimer, 1000);
}
}
makeTimer();
//]]>
</script>
<!-- Countdown holiday -->

   DEMO

Source Tôi Share Blog