简单时尚的jQuery倒计时插件

当前位置:主页 > jQuery库 > 布局和界面 > 简单时尚的jQuery倒计时插件
简单时尚的jQuery倒计时插件
分享:

    插件介绍

    SyoTimer是一款简单时尚的jQuery倒计时插件。该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全。

    浏览器兼容性

    浏览器兼容性
    时间:01-03
    阅读:
简要教程

SyoTimer是一款简单时尚的jQuery倒计时插件。该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全。它的特点还有:

  • 在计时器计时结束之后的回调函数中可以修改计时器的结构。
  • 可以周期的执行倒计时。
  • 计时采用淡入淡出的效果。
  • 可以自定义定时器的格式和样式。

浏览器兼容

  • Firefox 2+ (Win, Mac, Linux)
  • IE8+ (Win)
  • Chrome 6+ (Win, Mac, Linux, Android, iPhone)
  • Safari 3.2+ (Win, Mac, iPhone)
  • Opera 8+ (Win, Mac, Linux, Android, iPhone)

使用方法

首先需要在页面中引入jQuery(1.7+)和jquery.syotimer.js文件。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.syotimer.js"></script>          
              
HTML结构

该jQuery计时器的HTML结构使用一个空的<div>作为容器即可。

<div id="simple_timer"></div>             
              

插件初始化之后计时器将会变为如下结构:

<div id="simple_timer" class="timer">
    <div class="timer-head-block"></div>
    <div class="timer-body-block">
        <div class="table-cell day">
            <div class="tab-val">1</div>
            <div class="tab-metr">day</div>
        </div>
        <div class="table-cell hour">
            <div class="tab-val">1</div>
            <div class="tab-metr">hour</div>
        </div>
        <div class="table-cell minute">
            <div class="tab-val">1</div>
            <div class="tab-metr">minute</div>
        </div>
        <div class="table-cell second">
            <div class="tab-val">1</div>
            <div class="tab-metr">second</div>
        </div>
    </div>
    <div class="timer-foot-block"></div>
</div>                
              
CSS样式

需要为该计时器添加一些必要的CSS样式,这些样式你也可以自定义。

.timer{
    text-align: center;

    margin: 30px auto 0;
    padding: 0 0 10px;

    border-bottom: 2px solid #80a3ca;
}
.timer .table-cell{
    display: inline-block;
    margin: 0 5px;

    width: 79px;
    background: url(./images/timer.png) no-repeat 0 0;
}
.timer .table-cell .tab-val{
    font-size: 35px;
    color: #80a3ca;

    height: 81px;
    line-height: 81px;

    margin: 0 0 5px;
}
.timer .table-cell .tab-metr{
    font-family: Arial;
    font-size: 12px;
    text-transform: uppercase;
}

#simple_timer.timer .table-cell.day, 
#periodic_timer_days.timer .table-cell.hour{
    width: 120px;
    background-image: url(./images/timer_long.png);
}                
              
初始化插件

在页面DOM元素加载完毕之后,可以通过syotimer()方法来初始化该计时器插件,并在其中传入适当的参数。

$('#simple_timer').syotimer({
    year: 2020,
    month: 5,
    day: 9,
    hour: 20,
    minute: 30,
});                
              

配置参数

参数 描述 值类型 默认值 可用值
year 倒计时中的年份 integer 2014 >1979
month 倒计时中的月份 integer 7 1-12
day 倒计时中的天数 integer 31 1-31
hour 倒计时中的小时数 integer 0 0-23
minute 倒计时中的分钟数 integer 0 0-59
second 倒计时中的秒数 integer 0 0-59
dayVisible 如果为true则显示天数,为false则不显示天数,且小时数可以超过23 boolean true
dubleNumbers 如果为true,则显示前导带0的小时、分钟和秒数 boolean true
effectType 计时器秒数值改变时的效果 string 'none' 'none',
'opacity'
lang 本地化计时器语言,目前只支持英文和俄文 string 'eng' 'eng',
'rus'
periodic 计时器是否周期显示 boolean false
periodInterval the period of the timer in periodUnit (if periodic is set to true) integer 7 >0
periodUnit 周期时间的单位 string 'd' 'd', 'h',
'm', 's'

SyoTimer倒计时插件的github地址为:https://github.com/mrfratello/SyoTimer