Share123.vn thông báo: Kể từ ngày 01/03/2019 chúng tôi sẽ chuyển hệ thống sang Webseo.com.vn, quý khách mua Template blogspot đẹp có thể truy cập vào hệ thống mới tại đây
Đăng bởi Huy Tập lúc 5/11/16 4
Hôm nay ngồi sưu tầm vài code hay cho các bạn nào cần áp dụng, thủ thuật tạo đồng hồ đếm ngược được mình sưu tầm từ codepen.io. Mình đã tùy biến CSS cho phù hợp với dự án mình đang làm.

Demo:
Hướng dẫn tạo đồng hồ đếm ngược blogspot
Hướng dẫn tạo đồng hồ đếm ngược blogspot
Cách làm:
Bạn đăng nhập vào trang quản trị blogger => Bố cục => Tạo 1 tiện ích HTML/Javacript => Paste đoạn code sau:
<style type="text/css">
#clockdiv h2{font-family:'Roboto';font-weight:100;color:#034688;text-align:center;font-size:40px;margin:0 0 16px}
#clockdiv{font-family:sans-serif;color:#fff;background:rgba(255,255,255,0.63);display:inline-block;font-weight:100;text-align:center;font-size:30px;margin:20px auto;padding:20px;width:100%}
#clockdiv > div{padding:10px 35px;border-radius:3px;background:#034688;display:inline-block}
#clockdiv div > span{padding:0;border-radius:3px;font-size:58px;display:inline-block}
#clockdiv .smalltext{padding-top:5px;font-size:16px}
</style>

<div id="clockdiv">
  <h2>Countdown Clock</h2>
  <div>
    <span class="days"></span>
    <div class="smalltext">Days</div>
  </div>
  <div>
    <span class="hours"></span>
    <div class="smalltext">Hours</div>
  </div>
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>
 
    <script type='text/javascript'>
//<![CDATA[
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
  var days = Math.floor(t / (1000 * 60 * 60 * 24));
  return {
    'total': t,
    'days': days,
    'hours': hours,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var daysSpan = clock.querySelector('.days');
  var hoursSpan = clock.querySelector('.hours');
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);

    daysSpan.innerHTML = t.days;
    hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

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

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);
//]]>
</script>

Chú ý: Trong đoạn code bạn tùy chỉnh thông số ngày muốn hiển thị ở đoạn code sau:
var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

Chúc bạn thành công
Tags:

4 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 - Email: nguyenhuytap@gmail.com - website: www.share123.vn

0988227905
Floating Image X