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

hỉ còn 2 tháng rưỡi nữa là đến TẾT NGUYÊN ĐÁN 2019, 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 -->

 BLOGGER + THỦ THUẬT

Admin: Lê Quốc Dũng

Chào mừng bạn đã đến với Blog của tôi. Website chia sẻ Thủ Thuật - Phần Mềm - Ảnh Đẹp - PSD tổng hợp, ... được cập nhật liên tục. Mong được mọi người quan tâm.