Hi, Phòng khách!
Trang chủ
Đăng nhập
Công Cụ Tìm Kiếm

Lần hoạt động

| |
Tìm kiếm

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

Bài viết được duyệt bởi PuaruVN
Đăng ngày :11.12.2016 / 09:59[TOP]
VTA
VTA
Administrator
♥♥♥♥♥♥
[⚽ V4 TEAM ⚽]
Xin Chào, Giáng sinh đã đến gần hãy cùng Blog VuTienAnh 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
[thank]1. CSS
PHP Code:
<?php
<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
Mã Code Vina4u
<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
PHP Code:
<?php
<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é!
Tải về tập tin
[/thank]

Đã chỉnh sửa. VTA (11.12.2016 / 10:00) [1]
Đăng ngày :11.12.2016 / 10:00 #1
VTA
VTA
Administrator
♥♥♥♥♥♥
[⚽ V4 TEAM ⚽]
Bình luận bài viết
Đăng Nhập để Bình luận và sử dụng đầy đủ tính năng Diễn Đàn
  Tổng số: 2 Bình luận

Chia sẻ bài viết
Đám Mây Từ Khóa
Bài Viết Cùng chuyên mục
Lọc theo tác giả
Xem chủ để ngoại tuyến (Offline)

Trong diễn đàn

Sắp xếp theo thứ tự từ trên xuống
BigTruyen.info - Kho Truyện Tranh Online Khổng lồ
Trang chủ