当前位置：首页 > 网页特效 > 日期和时间

简单时尚的jQuery倒计时插件

分类：日期和时间日期：2024-05-14 点击(1) 评论(0)

简单时尚的jQuery倒计时插件

简介

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

```html
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.syotimer.js"></script>     
```     
#####  HTML结构
该jQuery计时器的HTML结构使用一个空的div作为容器即可。

```html
<div id="simple_timer"></div>        
```     
插件初始化之后计时器将会变为如下结构：

```html
<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样式，这些样式你也可以自定义。

```html
.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()方法来初始化该计时器插件，并在其中传入适当的参数。

```html
$('#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'|

web299.com

简单时尚的jQuery倒计时插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果