效果图
加载时...
定时器跑完后
上代码
标签body中
<div id="load"class="loading"style="display:none">
<div id="tip">页面正在加载请稍候!还有1秒</div>
</div>
<div id="zcContent"style="display:none">
<p>hello world!!</p>
<p>hello world!!</p>
<p>hello world!!</p>
</div>
css样式
html,body{
height:100%;
margin:0;
padding:0;
}
.loading{
top:0;
left:0;
position:fixed;
width:100%;
height:100%;
background:rgba(0,0,0,0.7);
font-size:50px;
text-align:center;
color:#fff;
}
.loading div{
height:150px;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
#zcContent{
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
font-size:50px;
text-align:center;
color:#222222;
background:#77d2c6;
}
script 标签调用timer
window.onload=function(){
vari=5;
timer=setInterval(function(){
i--;
if(i<=0){
clearInterval(timer);
document.getElementById('load').style['display']='none';
document.getElementById("zcContent").style["display"] ="block";
}else{
document.getElementById('load').style['display']='block';
document.getElementById('tip').innerHTML='页面正在加载请稍候！还有'+i+'秒';
};
},1000);
};
定时器的开启setInterval以及清除clearInterval，另外注意div本身层级关系！！
刚学html，写这个文章既是自己积累也是分享跟我一样的初学者，非喜勿喷，谢谢！！！
