WEB开发中的提示

最新推荐文章于 2021-10-31 21:30:25 发布

luckystar2008

最新推荐文章于 2021-10-31 21:30:25 发布

阅读量187

点赞数

文章标签： web 提示

Java Web 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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';
 }
}