效果图：
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>原生js仿APP封面广告</title>
<style>
*{padding:0;margin:0}
.feng-ad{position:fixed;width:100%;height:100%;top:0;z-index: 1000;background-position: center;}
.feng-ad .time-box{position:fixed;right:10px;top:10px;z-index:999;display:block;text-align:center;background:rgba(0,0,0,.4);border-radius:40px;font-size:12px;color:#fff;padding:3px 8px}
.feng-ad .time-box i{font-style:normal;}
.feng-ad .feng-inner{position:absolute;width:100%;bottom:0;left:0;background:#fff;padding-top:10%;padding-bottom:20%;}
.feng-ad .feng-inner .ad-text{padding:0 10%;text-align:center;}
</style>
</head>
<body>
<h1>Hello World!</h1>
<div id="fengAd" class="feng-ad" style="background-image: url(img/1.jpg);" >
<div class="time-box">跳过 <i id="time"></i>s</div>
<div class="feng-inner">
<div class="ad-text">
<h2>Wien Designs设计</h2>
<p>设计源于灵感，灵感始于积累。</p>
</div>
</div>
</div>
<script type="text/javascript">
var int=setInterval("clock()", 1000);
var num=3;
var time=document.getElementById("time");
time.innerHTML=num;
function clock(){
num>0 ? num-- : clearInterval(int);
time.innerHTML=num;
var timeSecond=time.innerHTML;
if (timeSecond == 0) {
//document.getElementById("fengAd").style.display="none"
}
}
</script>
</body>
</html>
星之书笔记
