SyoTimer是一款简单时尚的jQuery倒计时插件。该计时器插件支持IE8+的现代浏览器,它的界面简洁,功能齐全。
使用方法
首先需要在页面中引入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,
});