所需DOM结构
组件调用方法及所需DOM结构
<!-- 配置项中的class名前别忘了加点号哦 -->
<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{
'endTime': '20000',
'interval': 1000,
'timeRunCls': '.ks-countdown-run',
'timeUnitCls':{
'd': '.ks-d',
'h': '.ks-h',
'm': '.ks-m',
's': '.ks-s',
'i': '.ks-i'
},
'minDigit': 1,
'timeEndCls': '.ks-countdown-end'
}">
<!-- 倒计时结束时隐藏-->
<!--可以写多个 -->
<div class="ks-countdown-run">
<span class="ks-d"></span>天
<span class="ks-h"></span>小时
<span class="ks-m"></span>分
<!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 -->
<span class="ks-s"></span>秒
<span class="ks-i"></span>毫秒
</div>
<div class="ks-countdown-run"></div>
<!-- 倒计时结束时显示-->
<!--可以写多个 -->
<div class="ks-countdown-end">
倒计时结束了,干点什么吧
把什么隐藏起来,或者把什么显示出来
</div>
<div class="ks-countdown-end">
</div>
</div>
配置参数列表
配置参数 | 参数可选值 | 作用说明 |
endTime | 毫秒数(多少毫秒后倒计时结束),或者日期格式时间(格式:2011-7-21 11:01:01) | 倒计时结束时间 例如:毫秒数: 'endTime': '2011-7-21 11:01:01' |
interval | 单位:毫秒,取值范围(>=100毫秒),默认值为1000毫秒 | 倒计时刷新间隔(单位为毫秒/次)即每隔多少毫秒刷新一次 例如:interval = 2000, 那么屏幕上的时间每次变化时会少两秒 |
timeRunCls | 自定义值 | 有此class名的标签,其内容在倒计时运行时显示,倒计时结束时隐藏 |
timeUnitCls | 时间单位的组合值,每个时间单位的class名自定义 | 设定时间单位b标签的class 例如:{ 'd': '.ks-d', //天
|
minDigit | 数据类型:整数,取值范围(>=1),默认为1, | 每个时间单位值显示的最小位数,意思是超过不截断,少则前面补0显示 例如:digit = 2 |
timeEndCls | 自定义值 | 有此class名的标签,其内容在倒计时运行时隐藏,倒计时结束时显示 |
例子
<div class="main">
<div class="countdown">
<h2>
<span>今日推荐:</span>【感恩柒月 10:00开团】现价109元包邮 原价199元 吸尘器
</h2>
<div class="info-box">
<div class="meta">
<div class="J_TWidget" data-widget-type="Countdown" data-widget-config="{
'endTime': '30000',
'interval': 1000,
'timeRunCls': '.ks-countdown-run',
'timeUnitCls':{
'd': '.ks-d',
'h': '.ks-h',
'm': '.ks-m',
's': '.ks-s',
'i': '.ks-i'
},
'minDigit': 1,
'timeEndCls': '.ks-countdown-end'
}">
<!-- 购买按钮 -->
<div class="item-buy ks-countdown-run">
<strong class="price"><b>¥</b>109<span>.00</span></strong>
<a class="buy" href="http://ju.taobao.com/tg/today_items.htm" target="_blank">
</a>
</div>
<!-- 价格折扣 -->
<dl class="item-prices">
<dt class="price">原 价</dt>
<dt class="discount">折 扣</dt>
<dt class="save">节 省</dt>
<dd class="price"><del>¥199.00</del></dd>
<dd class="discount">5.4</dd>
<dd class="save">¥99.00</dd>
</dl>
<!-- 倒计时 -->
<div class="time-count ks-countdown-run">
<p class="tit">剩余时间: </p>
<span class="ks-d value"></span><span class="unit">天</span>
<span class="ks-h value"></span><span class="unit">小时</span>
<span class="ks-m value"></span><span class="unit">分</span>
<!-- 如果有0.1秒级别的变化建议以gif背景图片的形式变化 -->
<span class="ks-s value"></span><span class="unit">秒</span>
</div><!--/time-count-->
</div>
</div>
<div class="picbox">
<div class="pic">
<a target="_blank" href="http://item.taobao.com/item.htm?id=12291384145&key=C1YId0zGIlsd%2BRuRB06lpYpNM750V7zhXynPSbg%3D&tracelog=jubuybigpic"><img src="http://img02.taobaocdn.com/bao/uploaded/i4/T1npxPXhtEXXb1upjX.jpg_670x670.jpg"></a>
</div>
</div>
</div>
</div>
</div>
.main{
height: 400px;
width: 740px;
position: relative;
margin-bottom: 15px;
background-color: white;
border: 2px solid #F8DAD5;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 0 0 1px #F1F1F1;
-moz-box-shadow: 0 0 1px #F1F1F1;
-webkit-box-shadow: 0 0 1px #F1F1F1;
padding: 12px 0;
}
.countdown{
padding: 0 8px 2px;
z-index: 20;
}
.countdown h2 {
padding: 3px 8px;
font: bold 23px/36px "微软雅黑";
color: #333;
}
.countdown h2 span {
color: #DC442F;
}
.countdown h2 a{
color:#333333
}
.countdown h2 a:visited{
color:#333333
}
.countdown h2 a:hover{
color:#333333
}
.countdown .info-box {
margin-top: 12px;
position: relative;
zoom: 1;
}
.countdown .meta {
position:relative;
border:1px solid #ffed85;
border-right:none;
border-top:none;
height:183px;
width:254px;
float:left;
margin-left:2px;
padding-top:128px;
z-index:20;
}
.countdown .item-buy{
width:281px;
height:68px;
position:absolute;
z-index:20;
left:-27px;
top:0;
background:url(http://img01.taobaocdn.com/tps/i1/T1OJqiXhdgXXXXXXXX-451-860.png) no-repeat right 0;
}
.countdown .item-buy strong{
font: bold 46px Arial;
color: white;
text-shadow: 1px 1px 1px #666;
letter-spacing: -3px;
display: block;
height: 68px;
line-height: 68px;
padding-right: 90px;
text-align: center;
background: url(http://img01.taobaocdn.com/tps/i1/T1OJqiXhdgXXXXXXXX-451-860.png) no-repeat 190px 0;
}
.countdown .item-buy .buy {
width: 281px;
height: 68px;
display: block;
position: absolute;
top: 0;
cursor: pointer;
}
.countdown .item-prices {
width: 253px;
height: 59px;
position: absolute;
z-index: 10;
top: 68px;
left: -11px;
padding-left: 12px;
background: url(http://img02.taobaocdn.com/tps/i2/T11B9aXmReXXXXXXXX-264-248.png) no-repeat 1px 0;
word-break: normal;
word-wrap: normal;
}
.countdown .item-prices dt, .item-prices dd {
width: 84px;
height: 29px;
line-height: 29px;
float: left;
text-align: center;
}
.countdown .item-prices dt {
font-size: 14px;
color: #666;
}
.countdown .item-prices dd {
font: 17px Verdana;
letter-spacing: -2px;
color: #333;
}
.countdown .time-count {
margin: 14px 0 0 10px;
white-space: nowrap;
}
.countdown .time-count .tit {
vertical-align: middle;
display: inline;
}
.countdown .time-count .value{
display:inline;
font:normal 20px Verdana;
color:#333;
line-height:1em;
vertical-align: middle;
}
.countdown .time-count .unit{
vertical-align: middle;
margin:0 2px 0 1px;
}
.countdown .picbox {
width: 460px;
height: 310px;
position: relative;
z-index: 10;
float: left;
border: 1px solid #A51100;
border-left: none;
background:#cf301a url(http://img01.taobaocdn.com/tps/i1/T1OAyaXjxhXXXXXXXX-4-65.png) repeat-x 0 0;
background:-moz-linear-gradient(top, rgba(244, 56, 26, 1) -1%, rgba(207, 48, 26, 1) 18%);
background:-webkit-gradient(linear, 0 0, 0 bottom, from(rgba(244, 56, 26, 1)),color-stop(0.18, rgba(207, 48, 26, 1)), to(rgba(207, 48, 26, 1)));
background:-o-linear-gradient(top, rgba(244, 56, 26, 1) -1%, rgba(207, 48, 26, 1) 18%);
}
.countdown .pic {
width: 452px;
height: 301px;
padding: 3px 4px 4px;
border-top: 1px solid #FD9B8B;
}
.countdown .pic a {
border: 1px solid #F5D6D1;
display: block;
text-align: center;
background-color: white;
height: 300px;
overflow: hidden;
}