html5倒计时跳转页面,html 实现5秒倒计时跳转首页

这篇文章主要为大家详细介绍了html 实现5秒倒计时跳转首页，具有一定的参考价值，可以用来参考一下。

HTML经测试代码如下：

512笔记

512pic十余项黑科技，很轻狠快

立即打开

关闭

.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();

});

// 来自：512笔记(www.512pic.com)

注：关于html 实现5秒倒计时跳转首页的内容就先介绍到这里，更多相关文章的可以留意512笔记的其他信息。

关键词：倒计时