页面加载及取消加载 

 1 <style type="text/css">
 2 body {margin: 0px; background-color: #efeeed; }
 3 .spinner:before {
 4     content: "";
 5     display: block;
 6     position: absolute;
 7     left: -6px;
 8     top: -6px;
 9     height: 100%;
10     width: 100%;
11     border-top: 6px solid rgba(0,174,239,.8);
12     border-left: 6px solid transparent;
13     border-bottom: 6px solid transparent;
14     border-right: 6px solid transparent;
15     border-radius: 100%;
16 }
17 .spinner {
18     height: 30px;
19     width: 30px;
20     margin: 0 auto;
21     position: relative;
22     -webkit-animation: rotation .6s infinite linear;
23     -moz-animation: rotation .6s infinite linear;
24     -o-animation: rotation .6s infinite linear;
25     animation: rotation .6s infinite linear;
26     border: 6px solid rgba(0,174,239,.15);
27     border-radius: 100%;
28 }
29 @-webkit-keyframes rotation {
30    0% {-webkit-transform: rotate(0deg);}
31    100% {-webkit-transform: rotate(359deg);}
32 }
33 @-moz-keyframes rotation {
34    0% {-moz-transform: rotate(0deg);}
35    100% {-moz-transform: rotate(359deg);}
36 }
37 @-o-keyframes rotation {
38    0% {-o-transform: rotate(0deg);}
39    100% {-o-transform: rotate(359deg);}
40 }
41 /* css3动画效果 */
42 @keyframes rotation {  
43 0%{transform: rotate(0deg);}
44 100%{transform:rotate(359deg);}
45 }
46 </style>
<body>

请耐心等待 <span id='numDiv'>5</span>秒钟~<br/>
加载中.....
</body>
<script type="text/javascript">

loading();

var numDiv = document.getElementById("numDiv");
var num=5;
var interval=setInterval(function(){
    
    if(num==0){
    
        clearInterval(interval);
        loadingDone();//停止加载
    }
    
    numDiv.innerHTML = num--;
    
    },
    1000);

/**
 * 加载中的遮罩
 * 08-23 改成图片遮罩
 */

function loading() {
    create_msgbox('30px','30px','<div class="spinner"></div>');
    create_mask();
    re_mask();
}

/**
 * 消除遮罩
 */
function loadingDone() {
    remove_mask();
    var o = g('msgbox');
    if (o) {
        o.parentNode.removeChild(o);
    }
}

function create_msgbox(w,h,t){//创建弹出对话框的函数
    var box=document.createElement("div")    ;
    box.id="msgbox";
    box.style.position="absolute";
    box.style.width=w;
    box.style.height=h;
    box.style.overflow="visible";
    box.innerHTML=t;
    box.style.zIndex=1001;
    document.body.appendChild(box);
    re_pos();
}
function re_pos(){
    /*
    更改弹出对话框层的位置,确保在滚动以及窗口大小改变时一直保持在网页的最中间
    */
    var box=document.getElementById("msgbox");
    if(null!=box){
        var w=box.style.width;
        var h=box.style.height;
        box.style.left=get_left(w)+"px";
        box.style.top=get_top(h)+"px";
        
    }
}
function get_left(w){
    var bw=get_clientWidth();
    var bh=get_clientHeight();
    w=parseFloat(w);
    return (bw/2-w/2+get_scrollLeft());
}
function get_top(h){
    var bw=get_clientWidth();
    var bh=get_clientHeight();
    h=parseFloat(h);
    return (bh/2-h/2+get_scrollTop());
}
function get_clientWidth(){
    var cw ;
    if (document.documentElement.clientWidth){
        cw = document.documentElement.clientWidth;
        return cw;
    }else{
        cw = document.body.clientWidth; 
        return cw;
    }
}
function get_clientHeight(){
    var ch ;
    if (document.documentElement.clientHeight){
        ch = document.documentElement.clientHeight;
        return ch;
    }else{
        ch = document.body.clientHeight; 
        return ch;
    }
}
//获取左右滚动条位置兼容各浏览器
function get_scrollLeft(){
    var sl ;
    if (document.body.scrollLeft){
        sl = document.body.scrollLeft;
        return sl;
    }else if(document.documentElement.scrollLeft){
        sl = document.documentElement.scrollLeft; 
        return sl;
    }else {
        return 0;
    }    
}
//获取上下滚动条位置兼容各浏览器
function get_scrollTop(){
    var st ;
    if (document.body.scrollTop){
        st = document.body.scrollTop;
        return st;
    }else if (document.documentElement.scrollTop){
        st = document.documentElement.scrollTop; 
        return st;
    }else{
        return 0;
    }    
    
}
function create_mask(){//创建遮罩层的函数
    var mask=document.createElement("div");
    mask.id="mask";
    mask.style.position="fixed";
    mask.style.filter="alpha(opacity=69)";//IE的不透明设置
    mask.style.opacity=0.69;//Mozilla的不透明设置
    mask.style.backgroundColor="#444844";
    mask.style.top="0px";
    mask.style.left="0px";
            
    mask.style.width=get_scrollLeft()+get_clientWidth()+"px";    
    mask.style.height=get_scrollTop()+get_clientHeight()+"px";
    
    mask.style.zIndex=25;
    document.body.appendChild(mask);
}
function re_mask(){
    /*
    更改遮罩层的大小,确保在滚动以及窗口大小改变时还可以覆盖所有的内容
    */
    var mask=document.getElementById("mask")    ;
    if(null==mask)return;
    mask.style.width=get_width()+"px";
    mask.style.height=get_height()+"px";
}
/*
本Js代码用于创建一个自定义的确认窗口,
具体功能包括:自定义窗口标题,自定义窗口内容,是否显示取消按钮,焦点位置设定
*/
function get_width(){
    return (get_clientWidth() + get_scrollLeft());
}
function get_height(){
    return (get_clientHeight()+get_scrollTop());
}
function remove_mask(){
    /*
    清除遮罩层
    */
    var mask=document.getElementById("mask");
    if(null==mask)return;
    document.body.removeChild(mask);
}
function g(id) {
    return document.getElementById(id);
}
</script>

 

posted @ 2017-12-15 11:00  存钱罐  阅读(682)  评论(0)  编辑  收藏  举报