效果圖
加載時...
定時器跑完后
上代碼
標(biāo)簽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 標(biāo)簽調(diào)用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本身層級關(guān)系Ｊ勇牡借！
剛學(xué)html职车，寫這個文章既是自己積累也是分享跟我一樣的初學(xué)者，非喜勿噴，謝謝０卫场Ａ⒚馈匿又！
