Share Code Đếm Ngược Thời Gian Giáng Sinh Đơn Giản

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" >...

Bài viết liên quan:

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