Code đồng hồ đếm ngược thời gian cho blogspot

Hôm trước mình có share tips code đồng hồ đếm ngược thời gian và restart lại khi độc giả tải lại trang cho blogspot, tuy nhiên kiểu code đồng hồ đếm ngược này thường chỉ áp dụng trong những trang blogspot bán hàng, hoặc những blogspot landingpage giới thiệu sản phẩm, ví dụ chương trình giảm giá chỉ còn 1 ngày ,...

Hôm nay  mình share 1 dạng code hiển thị đếm ngược thời gian mà ngay cả khi độc giả f5 nó vẫn chạy về thời gian mình ấn định, trường hợp này thường áp dụng trong các trang landingpage về khóa học của các diễn giả, hoặc các khóa học Online.

Demo:

Cách làm:

Các bạn chèn đoạn code sau vào vị trị muốn hiển thị trong thẻ body hoặc vào Bố cục => Tạo Tiện ích Javacript/HTML => Paste đoạn code sau:
<style type="text/css">
.times{text-transform:none;font-size:20px;padding-right:30px}
#times-countdown{background:rgba(255,255,255,0.62);color:white;font-family:Oswald,Arial,Sans-serif;font-size:250%;text-transform:uppercase;text-align:left;font-weight:normal;padding:0 0 30px 0;border-radius:5px}
#demthoigian-share123{max-width:100%;margin:0 auto;text-align:center}
span#countdown{margin:10px 10px 20px;border-radius:9px;padding:20px;text-align:center;background-color:rgba(1,49,97,.85);color:white;font-size:170%;font-weight:600;font-family:'Nove Cento'}
#times-countdown h2{font-size:40px;color:#034688;font-weight:700;text-align:center;padding:6px;margin:18px}
</style>
<div id='times-countdown'>
<h2>Bắt đầu khóa học chỉ còn</h2>
     <div id='demthoigian-share123'>
<span id='countdown'/>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
// đặt ngày để bắt đầu đếm ngược, ở đây là 28-12-2016
var target_date = new Date("Dec 28, 2016").getTime();

// thêm biến cho các đơn vị thời gian
var days, hours, minutes, seconds;

//đặt id là countdown
var countdown = document.getElementById("countdown");

// cập nhật id "countdown" mỗi 1 giây
setInterval(function () {

    // thiết lập cho ngày giờ hiện tại và ngày kết thúc
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // tính ngày, giờ, phút và giây
    days = parseInt(seconds_left / 86400);
    seconds_left = seconds_left % 86400;
    
    hours = parseInt(seconds_left / 3600);
    seconds_left = seconds_left % 3600;
    
    minutes = parseInt(seconds_left / 60);
    seconds = parseInt(seconds_left % 60);
    
    // thiết lập cho biến countdown hiển thị ra ngoài
countdown.innerHTML = days + " <span class=\'times\'>ngày</span> " + hours + " <span class=\'times\'>giờ</span> "
  + minutes + " <span class=\'times\'>phút</span> " + seconds + " <span class=\'times\'>giây</span>";

}, 1000);
//]]>
</script>
Trong đoạn code trên bạn chỉ cần chú ý đến đoạn code màu đỏ
// đặt ngày để bắt đầu đếm ngược, ở đây là 28-12-2016
var target_date = new Date("Dec 28, 2016").getTime();
Đây chính là thời gian bạn muốn đếm ngược thời gian từ lúc bạn setup code đến khi chương trình sự kiện diễn ra, Ví dụ ngày diễn ra khóa học là 28-12-2016 thì sẽ ghi chỗ màu đỏ là Dec 28, 2016
Chúc các bạn thành công.