html定时器学习--模拟加载

效果图

加载时...

定时器跑完后

上代码

标签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，写这个文章既是自己积累也是分享跟我一样的初学者，非喜勿喷，谢谢！！！