html广告20s倒计时,简单时尚的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文件。

HTML结构

该jQuery计时器的HTML结构使用一个空的

作为容器即可。

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

1

day

1

hour

1

minute

1

second

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'