Share Code Đếm Ngược Giáng Sinh 2016 Đơn Giản

Xin Chào, Giáng sinh cũng đã gần đến blog sẽ luôn sưu tầm và tổng hợp lại những code hay về Ngày Giáng Sinh 2016 này. 

Ở bài trước mình cũng đã chia sẻ một code về đếm ngược giáng sinh bạn có thể tham khảo :

Tạo bộ lịch đếm ngược có ghi lời chúc giáng sinh độc đáo

Tiếp bài này mình sẽ chia sẻ cho bạn code đơn giản và đẹp hơn.

 Bắt Tay Vào Làm Thôi :D
1. CSS

<style type="text/css">
body {
  font-family: 'Mountains of Christmas', cursive;
  color: #ffffff;
  background: #C0392B;
  background: repeating-linear-gradient(
  45deg,
  #E74C3C,
  #E74C3C 10px,
  #C0392B 10px,
  #C0392B 20px);
}

.christmas-bg {
  background: repeating-linear-gradient(
  45deg,
  #2ECC71,
  #2ECC71 10px,
  #27AE60 10px,
  #27AE60 20px
);
}

.notxmas-bg {
  background: repeating-linear-gradient(
  45deg,
  #34495E,
  #34495E 10px,
  #2C3E50 10px,
  #2C3E50 20px
);
}

#mainwrap {
  padding-top: 10px;
  padding-bottom: 60px;
}

.img-center {
    display: block;
    margin-left: auto;
    margin-right: auto;
 }

.sleep-number {
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
}

@media (min-width: 768px) {
  .sleep-number {
    font-size: 300px;
  }
}

@media (max-width: 767px) {
  .sleep-number {
    font-size: 150px;
  }
}

@media (max-width: 480px) {
  .sleep-number {
    font-size: 90px;
  }
}

@media (min-width: 481px) {
  .sleep-text {
    font-size: 80px;
  }
}

@media (max-width: 480px) {
  .sleep-text {
    font-size: 40px;
  }
}

@media (max-width: 480px) {
  #xmasimg {
    max-width: 200px;
  }
}</style>

2. HTML

<div class="container">
    <div id="mainwrap" class="col-md-8 col-md-offset-2 text-center">
     <a href="http://iris-tips.blogspot.com/p/play.html?url=https://santatracker.google.com/village.html&amp;download=http://iris-tips.blogspot.com/" target="_blank"><img id="xmasimg" src="https://dl.dropboxusercontent.com/s/5uqou2o4ya9agh1/bell-120px.png"/></a>
      <div id="sleeps" class="sleep-number">-</div>
      <div id="text" class="sleep-text">Sleeps Until Christmas</div>
    </div>
</div>

3.Javascript

<script type='text/javascript'>
$(document).ready(function() {
  
  var sleepsTo = 0;
  var monthDaysUntil = [359, 328, 300, 269, 239, 208, 178, 147, 116, 86, 55, 25];
  var picAPic = ["630n0zf4ejjqhb3/snowman-120px.png", "a9v1dtgs9m4g5h3/firestove-120px.png" ,"5uqou2o4ya9agh1/bell-120px.png", "cqn10s10hv9xtne/cookie-120px.png", "k54f3genpvbqr3e/christmasstar-120px.png", "yqpfttxnara7cx7/candy-120px.png", "hhu9jsyhuk39954/ribbon-120px.png", "qqbd9ui5t5wrwoy/stick-120px.png", "f2uaiqo50kecdwl/christmas-tree-120px.png", "mdd0v8rn0zf5dcq/rocket-120px.png", "f9n2w4nfujleve3/rudolph-120px.png", "bmu0m8wxqjvbksz/santacart-120px.png", "ilrzah9sw95ezwr/calendarchristmas-120px.png", "9ox8sbx4s0va0xo/sinterclaus-120px.png"];
  var today = new Date();
  
  // add a day to Jan and Feb if a leap year
  var isLeap = new Date(today.getYear(), 1, 29).getMonth() == 1;
  if (today.getMonth() == 11 && today.getDate() > 25) {
    isLeap = new Date((today.getYear()+1), 1, 29).getMonth() == 1;
  };
  if(isLeap) {
    monthDaysUntil[0] = 360;
    monthDaysUntil[1] = 329;
  };
  
  //set the bg
  if (today.getMonth() == 11) {
    $('#mainwrap').addClass('christmas-bg');
  }
  else {
    $('#mainwrap').addClass('notxmas-bg');
  }
  
  //set the sleeps to Xmas
  if (today.getMonth() == 11 && today.getDate() > 25) {
    sleepsTo = (31 - today.getDate()) + monthDaysUntil[0];
    $('#sleeps').text(sleepsTo);
    $("#xmasimg").attr("src","https://dl.dropboxusercontent.com/s/" + picAPic[13]);
  }
  else {
    sleepsTo = monthDaysUntil[today.getMonth()] - today.getDate();
    $('#sleeps').text(sleepsTo);
    $("#xmasimg").attr("src","https://dl.dropboxusercontent.com/s/" + picAPic[today.getMonth()]);
  }
  
  // 1 sleep
  if(sleepsTo == 1) {
    $('#text').text("Sleep Until Christmas");
  };
  
  //if ITS CHRISTMAS!!!!
  if(sleepsTo == 0) {
    $('#sleeps').text("-");
    $('#text').text("Ho, Ho, Ho, it's Christmas!!!");
    $("#xmasimg").attr("src","https://dl.dropboxusercontent.com/s/" + picAPic[12]);
  };
});
</script>

Demo
Dowload

Lời Kết : Chúc Các Bạn Thành Công :D