html吧 关注：182,146贴子：1,338,748
- 14回复贴，共1页
写了个demo，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>延时显示</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var my_play = $('.play');
var my_time = $('.time');
var my_con = $('.content');
var box = $('.box');
var win_w = $(window).width();//获取浏览器可视区域宽度
var win_h = $(window).height();//获取浏览器可视区域高度
my_play.width(win_w).height(win_h);//给.play浏览器可视区域的宽高
box.css({marginTop:-(box.height()/2),marginLeft:-(box.width()/2)})//box垂直居中
var my_num = parseInt(my_time.text());
//计时器 开始
var timer = setInterval(num,1000);
var a = 1;
function num(){
var b = my_num - a;
my_time.text(b);
a++;
if (b<=0) {
clearInterval(timer);
};
};
//计时器 结束
//延时器 开始
setTimeout(function(){
my_play.hide();
my_con.show();
},10000)
//延时器 结束
});
</script>
<style type="text/css">
*{padding:0; margin:0;}
.play{background:#53b0f0; color:#fff; font-size:24px; font-weight:bold; position:relative;}
.play .box{overflow:hidden; position:absolute; left:50%; top:50%;}
.play .box .time{font-style:normal; color:#f00;}
.content{height:900px; background:#990efb; display:none;}
.content p{height: 40px; line-height: 40px; text-align:center; font-size: 32px; color: #fff; font-weight: bold; margin-top: 50px;}
</style>
</head>
<body>
<div class="play">
<div class="box">
<p>我是个视频</p>
<p>这个视频有10秒</p>
<p>进入还有<em class="time">10</em>秒</p>
</div>
</div>
<div class="content">
<p>我是网页内容</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>延时显示</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
var my_play = $('.play');
var my_time = $('.time');
var my_con = $('.content');
var box = $('.box');
var win_w = $(window).width();//获取浏览器可视区域宽度
var win_h = $(window).height();//获取浏览器可视区域高度
my_play.width(win_w).height(win_h);//给.play浏览器可视区域的宽高
box.css({marginTop:-(box.height()/2),marginLeft:-(box.width()/2)})//box垂直居中
var my_num = parseInt(my_time.text());
//计时器 开始
var timer = setInterval(num,1000);
var a = 1;
function num(){
var b = my_num - a;
my_time.text(b);
a++;
if (b<=0) {
clearInterval(timer);
};
};
//计时器 结束
//延时器 开始
setTimeout(function(){
my_play.hide();
my_con.show();
},10000)
//延时器 结束
});
</script>
<style type="text/css">
*{padding:0; margin:0;}
.play{background:#53b0f0; color:#fff; font-size:24px; font-weight:bold; position:relative;}
.play .box{overflow:hidden; position:absolute; left:50%; top:50%;}
.play .box .time{font-style:normal; color:#f00;}
.content{height:900px; background:#990efb; display:none;}
.content p{height: 40px; line-height: 40px; text-align:center; font-size: 32px; color: #fff; font-weight: bold; margin-top: 50px;}
</style>
</head>
<body>
<div class="play">
<div class="box">
<p>我是个视频</p>
<p>这个视频有10秒</p>
<p>进入还有<em class="time">10</em>秒</p>
</div>
</div>
<div class="content">
<p>我是网页内容</p>
</div>
</body>
</html>
