所需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'
或 日期格式: 'endTime': '10000'

interval 单位:毫秒,取值范围(>=100毫秒),默认值为1000毫秒 倒计时刷新间隔(单位为毫秒/次)即每隔多少毫秒刷新一次

例如:interval = 2000, 那么屏幕上的时间每次变化时会少两秒

timeRunCls 自定义值 有此class名的标签,其内容在倒计时运行时显示,倒计时结束时隐藏
timeUnitCls 时间单位的组合值,每个时间单位的class名自定义 设定时间单位b标签的class

例如:{

       'd': '.ks-d',      //天

   'h': '.ks-h',      //小时

   'm': '.ks-m',      //分

   's': '.ks-s',      //秒

   'i': '.ks-i'       //毫秒 

}

minDigit 数据类型:整数,取值范围(>=1),默认为1, 每个时间单位值显示的最小位数,意思是超过不截断,少则前面补0显示

例如:digit = 2
少于情形:2天4小时10分20秒,则应该显示02天04小时10分20秒
超过情形:400分20秒,则应该显示 400分20秒

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&amp;key=C1YId0zGIlsd%2BRuRB06lpYpNM750V7zhXynPSbg%3D&amp;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;
}
最后编辑: admin  文档更新时间: 2020-05-20 16:27   作者:admin