在加载Web页面时显示正在等待的窗体

最新推荐文章于 2021-06-09 18:49:20 发布

岁寒松柏

最新推荐文章于 2021-06-09 18:49:20 发布

阅读量2.5k

点赞数

分类专栏： div+css javaScript web开发文章标签： web stylesheet javascript class filter border

javaScript 同时被 3 个专栏收录

122 篇文章 0 订阅

订阅专栏

web开发

91 篇文章 0 订阅

订阅专栏

div+css

10 篇文章 0 订阅

订阅专栏

1.在css样式表里加入

/* 页面加载特效 */
.Loading
{
    font-size: 12px;
    font-family: 宋体;
    width: 100pt;
    height: 14pt;
    position: absolute;
    z-index: 3;
    background-color: #f5f5f5;
    cursor: wait;
    border-right: #000000 1px ridge;
    border-top: #000000 1px ridge;
    border-left: #000000 1px ridge;
    border-bottom: #000000 1px ridge;
    filter: alpha(opacity=82);
    -moz-opacity: 0.8;
    opacity: 0.8;
    left: expression((this.parentElement.offsetWidth-this.offsetWidth)/2);
    top: expression((document.body.clientHeight-this.style.pixelHeight)/3+document.body.scrollTop);
}
.Loading_Close
{
    CURSOR: hand;
    color:#000000;
    font-size:12px;
    font-weight:bold;
    margin-right:4px;
}

2.loading.js

//页面加载中效果开始
document.writeln("<div id=\"loadingDiv\" class=\"Loading\">");
document.writeln(" <table>");
document.writeln(" <tr>");
document.writeln(" <td align=\"right\">页面加载中请稍候  <span title=关闭 class=\"Loading_Close\" onClick=\"document.all.loadingDiv.style.display='none'\">×</span>");
document.writeln(" <\/td>");
document.writeln(" <\/tr>");
document.writeln("   <tr>");
document.writeln("   <td valign=\"middle\">");
document.writeln("   <img src=\"../images/Loading.gif\" border=\"0\" ><\/td>");
document.writeln("   <\/tr>");
document.writeln(" <\/table>");
document.writeln("<\/div>")

3.在<head>后加入