zoukankan      html  css  js  c++  java
  • 使用jQuery开发一个超酷的倒计时效果

    使用jQuery开发一个超酷的倒计时效果

    在线演示 在线下载

    今天我们分享一篇来自tutorialzine的教程,本文将使用jQuery开发一个超酷的倒计时效果插件,使用这个插件你可以生成一个非常炫的倒计时器,你可以方便的整合到你需要的web功能模块中,希望大家喜欢!

    <div id="countdown" class="countdownHolder">
    <span class="countDays">
    <span class="position">
    <span class="digit static"></span>
    </span>
    <span class="position">
    <span class="digit static"></span>
    </span>
    </span>

    <span class="countDiv countDiv0"></span>

    <span class="countHours">
    <span class="position">
    <span class="digit static"></span>
    </span>
    <span class="position">
    <span class="digit static"></span>
    </span>
    </span>

    <span class="countDiv countDiv1"></span>

    <span class="countMinutes">
    <span class="position">
    <span class="digit static"></span>
    </span>
    <span class="position">
    <span class="digit static"></span>
    </span>
    </span>

    <span class="countDiv countDiv2"></span>

    <span class="countSeconds">
    <span class="position">
    <span class="digit static"></span>
    </span>
    <span class="position">
    <span class="digit static"></span>
    </span>
    </span>

    <span class="countDiv countDiv3"></span>
    </div>

    以下代码将演示如何调用上述插件:

    $(function(){

    var note = $('#note'),
    ts = new Date(2012, 0, 1),
    newYear = true;

    if((new Date()) > ts){
    // The new year is here! Count towards something else.
    // Notice the *1000 at the end - time must be in milliseconds
    ts = (new Date()).getTime() + 10*24*60*60*1000;
    newYear = false;
    }

    $('#countdown').countdown({
    timestamp : ts,
    callback : function(days, hours, minutes, seconds){

    var message = "";

    message += days + " day" + ( days==1 ? '':'s' ) + ", ";
    message += hours + " hour" + ( hours==1 ? '':'s' ) + ", ";
    message += minutes + " minute" + ( minutes==1 ? '':'s' ) + " and ";
    message += seconds + " second" + ( seconds==1 ? '':'s' ) + " <br />";

    if(newYear){
    message += "left until the new year!";
    }
    else {
    message += "left to 10 days from now!";
    }

    note.html(message);
    }
    });

    });

    代码书写完毕!

  • 相关阅读:
    leetcode 之 Palindrome Partitioning
    虚拟机共享文件夹下tar
    leetcode 之 Excel Sheet Column Number
    AndroidHttpClient & jsoup 解析 正方教务系统
    查看android下的分区表
    ubuntukylin 下编译 android4.4
    android:layout_weight 和 android: weightSum的使用
    Intent 与Bundle的传值关系
    使用自定义的Toast
    SlideMenu例子解析2
  • 原文地址:https://www.cnblogs.com/gbin1/p/2313788.html
Copyright © 2011-2022 走看看