Đăng bởi Huy Tập lúc 10/12/2016 2
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:
Code đồng hồ đếm ngược thời gian cho blogspot

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.
Tags:

2 nhận xét:

Lưu ý: Khi để lại Nhận xét bạn nên click vào ô "Thông báo cho tôi" ở dưới để nhận phản hồi từ Admin

Tag liên kết

Đó chưa phải tất cả ... Chúng tôi còn 100 mẫu blog đẹp khác. View all Mẫu Template Blogger

Hãy nhanh tay gọi điện ngay đến chúng tôi theo số 0988227905 hoặc đặt hàng thiết kế ngay hôm nay theo mẫu form bên dưới.

Chúng tôi sẽ hoàn thành trong thời gian sớm nhất cho quý khách

Hãy truy cập để trải nghiệm dịch vụ của chúng tôi
Đã có
lượt Khách Hàng quan tâm đến dịch vụ của chúng tôi

Sử dụng nội dung ở trang này và dịch vụ tại Share123.vn có nghĩa là bạn đồng ý với Thỏa thuận sử dụng và Chính sách phát triển của chúng tôi.

www.Share123.vn - Website chuyên thiết kế blogspot, zip blogger, thiết kế blog chuẩn seo, blogger responsive, Thủ thuật Blogspot, Free Template Blogspot, kho giao diện blog đẹp, premium template blogger, free template blogger, Với kinh nghiệm nhiều năm trong nghề thiết kế Temple, design skin web chúng tôi cam kết tạo ra những sản phẩm chất lượng, tối ưu đến tay người dùng, thiết kế theo yêu cầu của quý khách, cùng đội ngủ support chuyên nghiệp nhiệt tình, ...

Copyright 2013 © Share123.vn - Blogger Team. All right Reserved - Hotline: 0988.227.905 - 0904.227.905 - Email: nguyenhuytap@gmail.com - website: www.share123.vn