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

Xin Chào, Giáng sinh đã đến gần hãy cùng Blog tạo một bộ lịch đếm ngược có ghi những lời chúc giáng sinh đầy ngộ nghĩnh và đáng yêu nhé.

Mặc định tiện ích này sẽ có 25 ô tương ứng với các ngày trong tháng 12 từ 1 đến 25 (Noel). Khi thời gian trôi đến ngày nào tiện ích sẽ lật mở ô chứa lời chúc của ngày đó và sẽ đếm ngược lần lượt cho đến ngày Noel.

Cách thực hiện

1. CSS

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Oleo+Script);body{background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/xmas.jpg");color:#fff;font-family:'Oleo Script',cursive;padding:20px;font-weight:400}
h1{margin:0;font-size:75px;line-height:75px;text-align:center;font-weight:400}
ul{margin:0 auto 30px auto;padding:0;list-style-type:none;max-width:900px;width:100%;text-align:center;user-select:none}
li{font-weight:400;background-color:#fff;box-sizing:border-box;border-radius:6px;display:inline-block;color:#111;cursor:pointer;font-size:26px;padding:15px;margin:25px 12px;width:130px;height:130px;line-height:100px;text-align:center;position:relative;vertical-align:top;user-select:none;perspective:800px;transition:all 0.4s ease-in-out}
ul li:last-child{background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/62105/santa.jpg") center top;background-size:cover;display:block;clear:both;margin:20px auto 0 auto;width:200px;height:275px}
ul li:last-child .door{font-size:100px;width:200px;height:275px;line-height:240px}
ul li:last-child .revealed{line-height:123px}
.door{user-select:none;color:#fff;font-size:70px;position:absolute;top:0;left:0;background-color:#91c1cc;box-sizing:border-box;border-top:2px #eee dashed;border-right:2px #eee dashed;border-bottom:2px #eee dashed;border-left:1px #eee solid;border-radius:6px;padding:15px;width:130px;height:130px;transform-origin:0 40%;transition:all 0.4s ease-in-out;transform-style:preserve-3d}
.current .door{background-color:#7EAD44}
.current .door.open{color:#7EAD44}
.revealed{user-select:none}
#message{box-sizing:border-box;color:#222;display:none;font-size:24px;padding:20px;background:#eddecb;max-width:500px;width:100%;border-radius:15px;margin:0 auto}
.open{box-shadow:14px 0 15px -1px rgba(0,0,0,0.2);color:#91c1cc;transform:rotate3d(0,1,0,-98deg)}
.jiggle{animation:jiggle 0.2s infinite;transform:rotate(-1deg)}
@keyframes jiggle{0%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@media screen and (min-width:480px){li{margin:25px 20px}}
@media screen and (min-width:768px){body{background-size:150px}p{right:6%;top:20%;bottom:auto;margin-left:auto;left:auto}}
</style>

2. HTML

<h1>Merry Christmas</h1>
<ul>
  <li><div class="door">1</div></li>
  <li><div class="door">2</div></li>
  <li><div class="door">3</div></li>
  <li><div class="door">4</div></li>
  <li><div class="door">5</div></li>
  <li><div class="door">6</div></li>
  <li><div class="door">7</div></li>
  <li><div class="door">8</div></li>
  <li><div class="door">9</div></li>
  <li><div class="door">10</div></li>
  <li><div class="door">11</div></li>
  <li><div class="door">12</div></li>
  <li><div class="door">13</div></li>
  <li><div class="door">14</div></li>
  <li><div class="door">15</div></li>
  <li><div class="door">16</div></li>
  <li><div class="door">17</div></li>
  <li><div class="door">18</div></li>
  <li><div class="door">19</div></li>
  <li><div class="door">20</div></li>
  <li><div class="door">21</div></li>
  <li><div class="door">22</div></li>
  <li><div class="door">23</div></li>
  <li><div class="door">24</div></li>
  <li><div class="door">25</div></li>
</ul>

<p id="message"></p>

3.Javascript

<script type='text/javascript'>
$( document ).ready(function() {

  var words = ["Christmas ", "is ", "love", "and", "ioy.", "Christmas", "is", "caring,", "giving", "and", "sharing.", "Christmas", "is", "the", "most", "wonderful", "feeling", "of", "the", "year.", "And", "one", "more", "thing", "Merry Christmas!"];

  var message = "";
  var date = new Date();
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var scrolled = false;
  var timeDelay = 200;

  // function to reveal message
  var cardReveal = function() {
    $("#message").text(message).show();
  }  

  //day=25; // uncomment to skip to 25

  // Only work in December
  if(month === 12) {
    // Loop through each calendar window
    $("li").each( function( index ) {
      var adventwindow = index + 1;
      var item = $(this);

      // Open past windows
      if( day !== adventwindow && adventwindow < day ) {
        window.setTimeout(function(){
          item.children(".door").addClass("open");
        }, timeDelay);
      }

      // timeout offset for past window opening animation
      timeDelay += 100;

      // Add words so far to message variable
      if( adventwindow <= day ) {
        var word = words[index];
        $(this).append('<div class="revealed">' + word + '</div>');
        message = message + " " + word;
      }

      // Add jiggle animation to current day window
      if(adventwindow === day) {
        $(this).addClass("current");
        $(this).addClass("jiggle");
      }

      // On clicking a window, toggle it open/closed and
      // handle other things such as removing jiggle and 25th
      $(this).on("click", function() {
        if(adventwindow <= day) { 
          $(this).children(".door").toggleClass("open");
        }

        $(this).removeClass("jiggle");

        // If 25th, can show the message
        if(day >= 25 && adventwindow === 25) {
          messageReveal();

          // Animate scroll to message if not already done
          if(!scrolled) {
            $('html, body').animate({
              scrollTop: $("#message").offset().top
            }, 2000);
            scrolled = true;
          }
        }
      });

    });

    // If beyond 24, show message
    if(day >= 26){
      messageReveal();
    }

  }

});
</script>

Các Bạn Sửa Chữa "Christmas ", "is ", "love", "and", "ioy.", "Christmas", "is", "caring,", "giving", "and", "sharing.", "Christmas", "is", "the", "most", "wonderful", "feeling", "of", "the", "year.", "And", "one", "more", "thing", "Merry Christmas!" Trên Sao Cho Đúng ý Của Bạn nhé!

Demo
Dowload

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