`

WEB开发中的提示

阅读更多

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开发的各种提示音.zip

    web端各种提示音大全

    WEB开发中错误信息大全

    在WEB开发过程中,错误信息是开发者经常会遇到的问题。这些错误可能是由于语法错误、逻辑错误、配置问题或外部资源访问失败等原因引起的。以下是一些常见的WEB开发错误类型及其详细解释: 1. **HTTP状态码错误**:...

    Web开发中的30种常用代码

    在Web开发中,开发者经常会遇到各种各样的代码需求,这些代码是构建动态、交互式网站的基础。本篇文章将探讨30种常用的Web开发代码片段,帮助开发者提高效率和提升用户体验。 1. **打开新窗口并传送参数**: 当...

    web开发各种小图标

    在Web开发中,小图标(Icon)扮演着至关重要的角色,它们可以提升用户界面的可识别性和美观性。这些图标通常以PNG格式提供,因为PNG支持透明度,使得图标能够无缝融入各种背景。本资源包包含了多种风格的Web开发图标...

    Web开发常用图片

    在Web开发过程中,图片是不可或缺的元素,它们用于增强用户体验,提供视觉吸引力,以及传达信息。"Web开发常用图片"这个资源包显然包含了各种在Web项目中常用的图像,旨在帮助开发者快速找到并应用这些常见的图形...

    web开发 sublime text

    在Web开发中,代码提示和自动完成功能至关重要。Sublime Text内置了多种编程语言的语法高亮,包括HTML、CSS、JavaScript等。它还提供强大的代码补全功能,通过自动识别上下文,能帮助开发者快速输入常用语句,提高...

    Java Web开发环境的安装与配置

    Java Web开发环境的安装与配置 Java Web 开发环境的安装与配置是 Java Web 开发应用的基础。它包括 JDK、Tomcat 和 MyEclipse 等软件的安装与配置。下面是详细的安装与配置过程: 1. JDK 的安装与配置 JDK 是 ...

    python web开发视频教程 02

    在本节"Python Web开发视频教程 02"中,我们主要聚焦于Python环境的搭建,特别是针对Windows操作系统的Python安装。Python是一种广泛应用于Web开发、数据分析、人工智能等多个领域的高级编程语言,其简洁的语法和...

    ABAP_WebDynpro开发(中文).pdf

    - **消息管理**:掌握如何在 WebDynpro 应用中实现错误和提示消息的显示。 - **资源文件**:学习如何使用资源文件来管理多语言文本和消息。 --- 通过以上内容的学习,开发者不仅能够深入理解 ABAP WebDynpro 的...

    《jQuery+BootstrapWeb开发案例教程(在线实训版)》案例源码.zip

    在本教程的源码压缩包中,包含了一个名为"57786《jQuery+Bootstrap Web开发案例教程(在线实训版)》案例源码"的文件,这很可能是教程中的所有实例代码集合。通过分析这些源码,我们可以深入了解如何将jQuery与...

    在MyEclipse中开发Java_Web应用

    在MyEclipse中开发Java Web应用是一门涉及多个技术领域的重要实践。MyEclipse作为一款强大的集成开发环境(IDE),特别适合于Java Web应用程序的构建。以下将详细讲解配置JDK、Tomcat以及使用SVN的基本步骤和相关...

    python web开发视频教程 03

    在这个"Python Web开发视频教程 03"中,我们将深入探讨Python编程环境中的一个关键工具——带提示符的解释器,这对于初学者和有经验的开发者来说都是一个极其重要的学习资源。在Python的世界里,交互式解释器提供了...

    web 开发常用小图标

    在Web开发中,小图标(Icon)扮演着至关重要的角色,它们可以提升用户体验,增加页面的视觉吸引力,同时还能简洁地传达功能或信息。本文将深入探讨Web开发中常用的图标类型、格式、应用方法以及最佳实践。 一、图标...

    jsp_web.rar_WEB开发实例_university system_web开发_大学_web

    【描述】"大学web开发技术及其应用实例重庆大学本科招生系统" 提示了这个项目是关于Web开发在高等教育中的实际应用,具体案例为重庆大学的本科招生系统。这表明开发者利用Web技术构建了一个功能完善的平台,可能包括...

    Eclipse+Web开发从入门到精通(实例版)

    本书还可能涉及一些高级话题,如Ajax异步请求、JSON数据交换格式、RESTful API设计、WebSocket实时通信等,这些都是现代Web开发中的重要技术。另外,对于版本控制,Git的使用也可能是必不可少的一部分,它可以帮助...

    海康威视WEB3.0控件开发包V1.1.0_Win32

    此开发包包含了所有必要的组件和文档,使开发者能够快速集成到自己的Web应用程序中,支持海康威视摄像头的实时视频流播放、录像回放、云台控制以及报警事件处理等功能。以下是一些关键知识点: 1. **Web3.0控件**:...

Global site tag (gtag.js) - Google Analytics