倒计时、团购倒计时--时分秒（5种方式）
第一种方式：jQuery设置时间秒倒计时代码
本地文件：http://svn.chenhua.cc/desk/plug/time/time_ms.html
线上文件：http://www.17sucai.com/pins/30357.html
带毫秒计时代码：http://www.17sucai.com/pins/19950.html
第二种方式：404倒计时跳转
HTML结构：
<span id="second">0</span>
JS代码为：
<script type="text/javascript">
var secs=10;
for(var i=secs;i>=0;i--){
window.setTimeout("doUpdate("+ i + ")",(secs-i)*1000);
}
function doUpdate(num){
document.getElementById("second").innerHTML=num;
if(num==0) window.location='<?=$this->config->item('home_url')?>';
}
</script>
参考页面有：http://mvc.chenhua.cc/index.php/error/show
第三种方式：5秒倒计时跳转首页
HTML代码为：
<div id="J_topBn" class="site-bn site-bn-20160224">
<div class="container clearfix">
<div class="site-bn-main">
<h2 class="title">小米手机5</h2>
<p class="desc">十余项黑科技，很轻狠快</p>
<div class="links"><a class="btn-link-common btn-link" href="http://s1.mi.com/m/ghd/2016/0221yy/index.html?from=0005">立即预约</a></div>
</div>
<div class="close-box">
<a class="close J_closeBn" href="javascript:void(0);"><i class="iconfont">关闭</i></a>
<span class="counter J_counter"></span>
</div>
</div>
</div>
<div id="J_topBackdrop" class="site-bn-backdrop J_closeBn"></div>
CSS代码为：
.site-bn{display:none;position:fixed;_position:absolute;top:0;left:0;z-index:99;width:100%}
.site-bn .container{position:relative}
.site-bn-backdrop{display:none;position:fixed;_position:absolute;top:0;left:0;z-index:98;width:100%;height:1000px;background:#000;opacity:.3;filter:alpha(opacity=30)\9}
.site-bn-20160224{height:100%;background-color:#fff;background-color:rgba(255,255,255,0.95);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#f2ffffff",endColorstr="#f2ffffff")\9;-webkit-font-smoothing:antialiased}
.site-bn-20160224 .close-box{position:absolute;top:72px;right:225px;text-align:right;color:#ff6700}
.site-bn-20160224 .close{display:inline-block;*zoom:1;*display:inline;width:24px;height:24px;line-height:24px;border:1px solid #ff6700;font-size:12px;text-align:center;color:#ff6700}
.site-bn-20160224 .counter{display:block;line-height:2}
.site-bn-20160224 .btn-link{display:inline-block;*zoom:1;*display:inline;width:196px;height:48px;border:1px solid #ff6700;line-height:48px;text-align:center;color:#ff6700;font-size:16px}
.site-bn-20160224 .site-bn-main{margin-top:115px;text-align:center}
.site-bn-20160224 .site-bn-main .title{margin:0 0 10px;font-size:70px;color:#ff6700;line-height:1;font-family:'F5bfdf';font-weight:normal}
.site-bn-20160224 .site-bn-main .desc{margin:0 0 70px;font-size:20px;color:#ff6700}
.site-bn-bar{width:100%}
.site-bn-bar .container{position:relative}
.site-bn-bar .site-bn-bar-link{display:inline-block;*zoom:1;*display:inline;width:115px;height:32px;font-size:12px;line-height:32px;text-align:center;color:#fff;background:#000;vertical-align:4px}
.site-bn-bar .site-bn-bar-close{position:absolute;right:0;top:7px;width:46px;height:46px;font-size:28px;line-height:46px;text-align:center;background-color:#f1410a;color:#fff;opacity:.6;filter:alpha(opacity=60)\9}
JS代码为：
jQuery(function($){
var $topBn = $('#J_topBn'),
$topBnBackdrop = $('#J_topBackdrop'),
$counter = $('.J_counter'),
$closeBnTrigger = $('.J_closeBn'),
timeoutTopBn,
bnCounter = 5;
function countDown(){
bnCounter -=1;
if(bnCounter < 1){
closeBn();
}else{
$counter.text(bnCounter + ' 秒后关闭');
}
}
function closeBn(){
var expireDate = 7;
window.clearInterval(timeoutTopBn);
$counter.remove();
$topBn.animate({'top':-$topBn.height()},1000,function(){
$topBn.hide();
$topBnBackdrop.hide();
});
// $.cookie('indexTopBn', '1', {
// expires: expireDate
// });
}
function initTopBar(){
$topBn.show();
$topBnBackdrop.height($(document).height()).show();
timeoutTopBn = window.setInterval(function(){
countDown();
},1000);
$closeBnTrigger.on('click',function(e){
e.preventDefault();
closeBn();
})
}
initTopBar();
});
本地效果查看：desk/topic/5u_yuanchuang/index.html
第四种方式、示例如图
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-麦包包触屏倒计时效果
第五种方式、一个页面多个倒计时效果
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"></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"></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-麦包包精品特卖多个倒计时效果
浙公网安备 33010602011771号