欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

WEB开发中的提示

程序员文章站 2024-03-05 15:39:37
...

1.当后台处理时间较长时，可在提交前显示一个层提示 ：

<script type='text/javascript' src='DivLayer.js'></script>
  <script type='text/javascript' >
   function submitXform() {
    var params = {width:300,height:60};
    var layer = new Layer(params);
    layer.showStringLayer("正在检查并提交，请稍等...");
    inputForm.submit();
   }
  </script>

 

2.当加载页面需要较长时间时，可使用如下方式提示：

<body>
   <script type='text/javascript' src='DivLayer.js'></script>
   <script type='text/javascript' >
    var params = {width:300,height:60};
    var layer = new Layer(params);
    layer.showStringLayer("正在加载页面，请稍等...");
   </script>
  </body>
   
   <script type='text/javascript' >
    setInterval("doInit()",100);
    function doInit() {
     var currentState = document.readyState.toLowerCase();
     if (currentState == 'complete') // 文档加载完成
     {
      // 隐藏提示层
      layer.hideLayer();
     }
    }
   </script>

 

DivLayer.js:

//居中显示的层

var Layer = function(params){
 this.params = params;
 this.createLayer = function() {
  var s = "<div id='center_layer' style='position:absolute;top:50%;left:50%;text-align:center;width:" + this.params.width +";height:"+this.params.height+";margin-top:-"+this.params.height/2+";margin-left:-"+this.params.width/2+";padding-top:"+(this.params.height/4+5)+";z-index:10;display:none;border:1px solid #0099FF;'></div>";
  var fullscreen = "<div style='width:100%;height:100%;z-index=9'></div>";
  document.write(fullscreen);
  document.write(s);
 },
 this.showStringLayer = function(displayString) {
  this.createLayer();
  center_layer.innerText = displayString;
  center_layer.style.display = "block";
 },
 this.showImageLayer = function(img) {
  this.createLayer();
  center_layer.innerHTML = img;
  center_layer.style.display = 'block';
 },
 this.hideLayer = function() {
  center_layer.style.display = 'none';
 }
}

 

相关标签： web 提示

上一篇： 手机端自己写js消息提示

下一篇： (三)剑指offer 43翻转单词顺序列

推荐阅读