jquery.countdown.js - jQuery 倒计时插件倒计时时钟
  • 分享到微信朋友圈
    X
立即下载 查看演示

countdown.js 是一个小巧的 jQuery 倒计时时钟插件，允许您在自定义 UTC 时区偏移的支持下倒计时到目标日期时间。

如何使用

需要引入的文件

<script src="js/jquery.min.js"></script> 
<script src="jquery.countdown.min.js"></script>

HTML 结构

<ul id="timer">
    <li><span class="days">00</span><p class="days_text">
        Days</p>
    </li>
    <li class="seperator">:</li>
    <li><span class="hours">00</span><p class="hours_text">
        Hours</p>
    </li>
    <li class="seperator">:</li>
    <li><span class="minutes">00</span><p class="minutes_text">
        Minutes</p>
    </li>
    <li class="seperator">:</li>
    <li><span class="seconds">00</span><p class="seconds_text">
        Seconds</p>
    </li>
</ul>

初始化倒计时时钟并指定目标日期时间。

<script type="text/javascript">
    $(function () {
        var now = new Date();
        var day = now.getDate();
        var month = now.getMonth() + 1;
        var year = now.getFullYear() + 1;

        var nextyear = month + '/' + day + '/' + year + ' 07:07:07';

        $('#timer').countdown({
            date: nextyear, // TODO Date format: 07/27/2017 17:00:00
            offset: +2, // 时区
            day: 'Day',
            days: 'Days',
            hideOnComplete: true
        }, function (container) {
            alert('Done!');
        });
    });
</script>

参数 配置

  • date:null,// 倒计时时间 格式: 07/27/2017 17:00:00

  • offset:null,// //时区，GMT号码

  • day:'Day',//a Day text

  • days:'Days',//an Days text

  • hour:'Hour',//a Hour text

  • hours:'Hours',//an Hours text

  • minute:'Minute',//a Minute text

  • minutes:'Minutes',//an Minutes text

  • second:'Second',//a Second text

  • seconds:'Seconds'//an Seconds text