首页
Web开发
Windows程序
编程语言
数据库
移动开发
系统相关
微信
其他好文
会员
首页
>
其他好文
> 详细
Html5添加简单时尚的倒计时插件教程
时间:
2016-01-06 14:07:49
阅读:
200
评论:
0
收藏:
0
[点我收藏+]
标签:
一、使用方法
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.syotimer.js"></script>
二、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样式
.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);
}
四、初始化插件
$(’#simple_timer’).syotimer({
year: 2020,
month: 5,
day: 9,
hour: 20,
minute: 30,
});
KeyMob移动端广告平台应用开发者与广告主首先手机广告优化平台,是国内专注于应用开发展在与广告主发展的优化平台,致力于为应用开发者和广告主大大提高填充率。从而收入也收入更高。
Html5添加简单时尚的倒计时插件教程
标签:
踩
(
0
)
赞
(
0
)
举报
评论
一句话评论(
0
)
登录后才能评论!
key
加入时间:
2016-01-05
已关注
关注此人
发短消息
文章分类
默认分类(
277
)
“
key
”关注的人------(
0
)
“
key
”的粉丝们------(
0
)
友情链接
兰亭集智
国之画
百度统计
站长统计
阿里云
chrome插件
新版天听网
关于我们
-
联系我们
-
留言反馈
© 2014
mamicode.com
版权所有 联系我们:gaon5@hotmail.com
迷上了代码!