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

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

HTML经测试代码如下：

<div id="J_topBn" class="site-bn site-bn-2016022
文章正文

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

HTML经测试代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<code class="html">
<div id="J_topBn" class="site-bn site-bn-20160224">
    <div class="container clearfix">
         <div class="site-bn-main">
              <h2 class="title">php教程</h2>
              <p class="desc">512pic十余项黑科技，很轻狠快</p>
              <div class="links"><a class="btn-link-common btn-link" href="http://www.idcnote.com">立即打开</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>
 
</code>
css经测试代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<code class="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}
</code>
JS经测试代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<code class="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();
});
// 来自：php教程（www.idcnote.com）
</code>

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

代码注释
上一篇PHP使用FTP函数创建目录下一篇JS select转移工具箱的通用方法

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！