Năm mới 2014 sắp đến rồi, mình xin chúc cho các bạn có một năm mới thật An Khang Thịnh Vượng, tràn đầy sức khỏe, luôn sum vầy bên gia đình và người mình yêu thương nhé.
Và hôm nay mình sẽ hướng dẫn các bạn làm một cái đồng hồ đếm ngược đến năm 2014.
Do mình để trong phần quản lý trang của mình là tiếng anh, nên mình sẽ hướng dẫn bằng tiếng anh luôn, bạn nào không hiểu thì liên hệ mình nha.
Các bạn vào Layout --> Add a Gadget --> HTML/JavaScript và thêm đoạn code bên dưới vào:
<style type="text/css" scoped> 
  #times-countdown {
    background:#255d90 url(http://4.bp.blogspot.com/-fhJ814QpbUg/UsKCbflIvVI/AAAAAAAAGQA/CERwLJTtcbo/s1600/newyearback2.png)no-repeat top right;
    color:white;
    font-family:Oswald, Arial, Sans-serif;
    font-size:250%;
    text-transform:uppercase;
    text-align:left;
    font-weight:normal;
    padding:30px;
    border-radius:5px;
  }
  .times {color:white}
  #countdown{background:#df5063;border-radius:4px;padding:5px 20px}
</style>
<div id='times-countdown'>
    <span id='countdown'></span>
</div>
<script type='text/javascript'>
//<![CDATA[
// đặt ngày để bắt đầu đếm ngược, ở đây là 1-1-2014
var target_date = new Date("Jan 1, 2014").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 = hours + " : "
  + minutes + " : " + seconds + "";
 
}, 1000);
//]]>
</script>
Bạn có thể thay thế cách hiển thị biến countdown ra bên ngoài bằng cách khác:
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 là đến năm</span> 2014";
BÀI VIẾT HAY CHỨ...?

Chia sẻ bài viết: