Diễn Đàn Phan Ri Club Online
Chào Mừng Bạn Đến Với PhanRiClub Diễn Đàn Giao Lưu Kết Nối Bạn Bè ! Hãy Đăng Kí Thành Viên Để Chia Sẽ Nhưng Thủ Thuật Mà Bạn Biết & Còn Nếu Là Thành Viên Hãy Đăng Nhập Chia Sẽ Bài Viết Các Bạn Nhé ! Diễn Đàn Mới Thành Lập Còn Nhiều Thiếu Sót Rất Mong Sự Đóng Góp Nhiệt Tình Cửa Các Bạn ! Xin Cảm Ơn Các Bạn Nhiều
Diễn Đàn Phan Ri Club Online
Chào Mừng Bạn Đến Với PhanRiClub Diễn Đàn Giao Lưu Kết Nối Bạn Bè ! Hãy Đăng Kí Thành Viên Để Chia Sẽ Nhưng Thủ Thuật Mà Bạn Biết & Còn Nếu Là Thành Viên Hãy Đăng Nhập Chia Sẽ Bài Viết Các Bạn Nhé ! Diễn Đàn Mới Thành Lập Còn Nhiều Thiếu Sót Rất Mong Sự Đóng Góp Nhiệt Tình Cửa Các Bạn ! Xin Cảm Ơn Các Bạn Nhiều
    Đăng nhập hoặcđăng kýđể tham gia thảo luận trên diễn đàn




    You are not connected. Please login or register


    Bài viết : [Hướng Dẫn - Code] Đếm ngược thời gian (ngày sinh nhật, ngày lễ, ngày tết)


    Bài viết thứ :1
    Đăng vào:Wed Dec 21, 2016 1:09 am
    Admin

    Admin

    Admin

    Admin
    Bạn có thể đặt thời gian ngày sinh nhật, lễ, tết... một cách thủ công và nó sẽ tự động đếm ngược cho đến khi về 0, code được viết bằng jquey trên html nên ae sài có thể dùng mà ko sợ chết hots như các code khác

    Thêm code vào vị trí cần hiển thị trong diễn đàn

    Code:
    <h1>Đếm Ngày ....</h1>
    <div id="clockdiv">
     <div>
       <span class="days"></span>
       <div class="smalltext">Ngày</div>
     </div>
     <div>
       <span class="hours"></span>
       <div class="smalltext">Giờ</div>
     </div>
     <div>
       <span class="minutes"></span>
       <div class="smalltext">Phút</div>
     </div>
     <div>
       <span class="seconds"></span>
       <div class="smalltext">Giây</div>
     </div>
    </div>
    <style>
    body{
    text-align: center;
    background: #00ECB9;
     font-family: sans-serif;
     font-weight: 100;
    }

    h1{
     color: #396;
     font-weight: 100;
     font-size: 40px;
     margin: 40px 0px 20px;
    }

    #clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: 100;
    text-align: center;
    font-size: 30px;
    }

    #clockdiv > div{
    padding: 10px;
    border-radius: 3px;
    background: #00BF96;
    display: inline-block;
    }

    #clockdiv div > span{
    padding: 15px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
    }

    .smalltext{
    padding-top: 5px;
    font-size: 16px;
    }
    </style>

    <script>
    function getTimeRemaining(endtime) {
     var t = Date.parse(endtime) - Date.parse(new Date());
     var seconds = Math.floor((t / 1000) % 60);
     var minutes = Math.floor((t / 1000 / 60) % 60);
     var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
     var days = Math.floor(t / (1000 * 60 * 60 * 24));
     return {
       'total': t,
       'days': days,
       'hours': hours,
       'minutes': minutes,
       'seconds': seconds
     };
    }

    function initializeClock(id, endtime) {
     var clock = document.getElementById(id);
     var daysSpan = clock.querySelector('.days');
     var hoursSpan = clock.querySelector('.hours');
     var minutesSpan = clock.querySelector('.minutes');
     var secondsSpan = clock.querySelector('.seconds');

     function updateClock() {
       var t = getTimeRemaining(endtime);

       daysSpan.innerHTML = t.days;
       hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
       minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
       secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

       if (t.total <= 0) {
         clearInterval(timeinterval);
       }
     }

     updateClock();
     var timeinterval = setInterval(updateClock, 1000);
    }

    var deadline = new Date(Date.parse(new Date()) + 60 * 24 * 60 * 60 * 1000);
    initializeClock('clockdiv', deadline);
    </script>
    Chú ý đoạn
    Code:
    var deadline = new Date(Date.parse(new Date()) + 60 * 24 * 60 * 60 * 1000);
    Hãy sửa lại thời gian đếm ngược theo ý muốn

    Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang  Thông điệp [Trang 1 trong tổng số 1 trang]

    Permissions in this forum:
    Bạn không có quyền trả lời bài viết

     
    • Free forum | ©phpBB | Free forum support | Báo cáo lạm dụng | Thảo luận mới nhất