简单时尚的jQuery倒计时插件

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,
});                
              

配置参数

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