倒计时的效果、团购倒计时(countdown)

一、示例如图

HTML结构：

<div class="countdown">
        <h4>倒计时</h4>
        <div class="countdown-time J-panic-countdown"  data-nowtime="2014-10-08 20:02:36"  data-endtime="2014-10-09 10:00:00"></div>
</div>

JS代码为：

$(function(){var e={},f=$(".J-panic-countdown"),g=f.data("nowtime"),h=f.data("endtime");
  e.countdown=function(a,b,c,d,e){var f=a;if(!b||""===b||!c||""===c)return!1;b=new Date(b.replace(/-/g,"/")),c="string"==typeof c?new Date(c.replace(/-/g,"/")):c;var g=c.getTime(),h=b.getTime(),i=setInterval(function(){g+=1e3;var a,b,c,j,k="",l=parseInt((h-g)/1e3,10);a=parseInt(l/3600/24,10),b=parseInt(l/3600%24,10),c=parseInt(l/60%60,10),j=parseInt(l%60,10),0>j&&(clearInterval(i),a=b=c=j=0,"function"==typeof e&&e(f)),k=d.replace("{d}",10>a?"0"+a:a).replace("{h}",10>b?"0"+b:b).replace("{m}",10>c?"0"+c:c).replace("{s}",10>j?"0"+j:j),f.html(k)},1e3)},
  e.countdown(f,h,g,"<span>{h}</span><span>{m}</span><span>{s}</span>",function(){})
});

文件分享下载如下：baiduyunguanjia-javascript实例-20141018-麦包包触屏倒计时效果

二、一个页面多个倒计时效果

倒计时的效果、团购倒计时(countdown)

HTML结构：

<div class="item">
        <div class="wrap">
               <div class="hd">
                       <div class="logo"><img  src="indexjscss/harson.jpg"  height="40"  style="width:105px;"></div>
                       <div class="title">德琳，精品男包奢华典范</div
                </div>
                <div class="pic"><a  href=""><img  src="indexjscss/z-hasen.jpg"  width="100%"  alt="德琳，精品男包奢华典范"></a></div>
                <div class="fb">
                       <div class="discount"><strong  class="num">4.0</strong>折起</div>
                       <div class="countdown J-flashbuy-countdown"  data-now-time="2014-10-19 12:26:52"  data-end-time="2014/10/20 10:00:00"><i  class="iconfont cd">&#xe61d;</i> 剩余 <span class="cd-con"></span></div>
                 </div>
         </div>
 </div>
<div class="item">
        <div class="wrap">
               <div class="hd">
                       <div class="logo"><img  src="indexjscss/harson.jpg"  height="40"  style="width:105px;"></div>
                       <div class="title">德琳，精品男包奢华典范</div
                </div>
                <div class="pic"><a  href=""><img  src="indexjscss/z-hasen.jpg"  width="100%"  alt="德琳，精品男包奢华典范"></a></div>
                <div class="fb">
                       <div class="discount"><strong  class="num">4.0</strong>折起</div>
                       <div class="countdown J-flashbuy-countdown"  data-now-time="2014-10-19 12:26:52"  data-end-time="2014/10/20 10:00:00"><i  class="iconfont cd">&#xe61d;</i> 剩余 <span class="cd-con"></span></div>
                 </div>
         </div>
 </div>

JS代码为：

$(function(){
 c=function(a,b,c,d,e){var f=a;if(!b||""===b||!c||""===c)return!1;b=new Date(b.replace(/-/g,"/")),c="string"==typeof c?new Date(c.replace(/-/g,"/")):c;var g=c.getTime(),h=b.getTime(),i=setInterval(function(){g+=1e3;var a,b,c,j,k="",l=parseInt((h-g)/1e3,10);a=parseInt(l/3600/24,10),b=parseInt(l/3600%24,10),c=parseInt(l/60%60,10),j=parseInt(l%60,10),0>j&&(clearInterval(i),a=b=c=j=0,"function"==typeof e&&e(f)),k=d.replace("{d}",10>a?"0"+a:a).replace("{h}",10>b?"0"+b:b).replace("{m}",10>c?"0"+c:c).replace("{s}",10>j?"0"+j:j),f.html(k)},1e3)}
 $(".J-now-flashbuy .item").each(function(){
        var a=$(this),d=a.find(".J-flashbuy-countdown"),e=d.data("now-time"),f=d.data("end-time");
        c(d.find(".cd-con"),f,e,'<span class="t">{d}</span>\u5929<span class="t">{h}</span>\u5c0f\u65f6<span class="t">{m}</span>\u5206<span class="t">{s}</span>\u79d2',function(){})
    })
});

文件分享下载：baiduyunguanjia-javascript实例-20141019-麦包包精品特卖多个倒计时效果

秒客网

倒计时的效果、团购倒计时(countdown)

相关文章