`
mgssnake
  • 浏览: 42443 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
文章分类
社区版块
存档分类
最新评论

JavaScript你有多牛!

阅读更多

     前些天做项目的时候,在下载报表部分,大家说下载等待时间太久了,没有给用户一个提示,不是很好。就让我写个JavaScript做一个弹出提示,等下载完了,再取消这个弹出提示。拿到这个任务的时候我想到了JavaEye登陆界面我就试着模仿这个效果做出了个JavaScript(JAVAEYE弹出登陆使用的不是JAVASCRIPT),现在把代码贴出来,希望,高手不要见笑

原理就是创建两个动态的DIV,一个当背景设置为透明,一个则加载显示页面

--------------------------------------------------------加载页面------------------------------------------------------------------------
 

js 代码
  1. function loading(){   
  2.            
  3.         var loadPage ;   
  4.         var dynDivBg = document.createElement("div");   //创建一个动态DIV   
  5.         dynDivBg.style.backgroundColor= "#C0C0C0";   
  6.         dynDivBg.style.position = "absolute";           //设置为绝对布局   
  7.         dynDivBg.style.filter = "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";  //透明度设置为100%透明   
  8.         dynDivBg.style.width = "100%";                  //宽、高为满屏   
  9.         dynDivBg.style.height = "100%";   
  10.         dynDivBg.id = "dynDivBg";   
  11.   
  12.         var dynDiv = document.createElement("div");   
  13.         dynDiv.style.position = "absolute";   
  14.         dynDiv.style.backgroundColor = "red";   
  15.         dynDiv.style.borderWidth = "2px";   
  16.         dynDiv.style.borderStyle ="solid";   
  17.         dynDiv.style.borderColor ="green";   
  18.         dynDiv.style.left = "200px";   
  19.         dynDiv.style.top = "250px";   
  20.         dynDiv.id = "dynDiv";   
  21.         dynDiv.innerText = "数据加载中……"//创建内容   
  22.         document.body.insertAdjacentElement("afterBegin",dynDiv);       //最后将创建的DIV放入页面中   
  23.         document.body.insertAdjacentElement("afterBegin",dynDivBg);   
  24.     }  


--------------------------------------------------------加载显示页面-------------------------------------------------------------

js 代码
  1. function login_suc(){   
  2.         //移出父窗体的对象   
  3.         window.parent.document.body.removeChild(window.parent.document.getElementById("dynDivBg"));   
  4.         window.parent.document.body.removeChild(window.parent.document.getElementById("dynDiv"));   
  5.            
  6.            
  7.     }  
分享到:
评论

相关推荐

    JavaScript犀牛书电子版

    在JavaScript的世界里,你需要掌握以下关键知识点: 1. **基础语法**:JavaScript是一种基于原型的动态类型语言,这意味着变量在声明时不需要指定数据类型,而是根据赋值自动确定。了解变量、常量、数据类型(如...

    最牛Javascript 日历控件

    最牛Javascript 日历控件 很棒! 两步骤完全搞定 1.引用 <script language="javascript" type="text/javascript" src="My97DatePicker/WdatePicker.js"> 2.使用 onClick="WdatePicker()

    JavaScript权威指南(JavaScript犀牛书一本)

    通过这本书,无论是初学者还是有经验的开发者,都可以深入学习到JavaScript的精髓,提升编程技能。同时,书中还包含了大量示例和练习,帮助读者巩固理论知识,提高实际编程能力。在阅读过程中,结合实践,将更有利于...

    犀牛JavaScript第5版下

    《犀牛JavaScript第5版》对于JavaScript的深入理解提供了丰富的实例和详尽的解释,不仅适合初学者系统学习,也对有经验的开发者有很高的参考价值。通过阅读这本书,读者能够掌握JavaScript的精髓,无论是在Web开发、...

    ArcGIS API for Javascript(中文版!!)

    9. **地图服务的版本管理**:ArcGIS Server的服务有多个版本,API提供了版本控制机制,允许开发者选择适合的版本进行数据访问。 10. **社区地图**:ArcGIS API还可以集成Esri的社区地图服务,让用户参与到地图内容...

    犀牛JavaScript(第5版)

    犀牛JavaScript(第5版) JavaScript概述 语法结构 数据类型和值 变量 表达式和运算符 语句 对象和数组 函数 构造函数和原型 模块和名字空间 使用正则表达式的模式匹配 脚本化java 客户端 JavaScript

    JavaScript权威指南(中文第四版犀牛书)

    JavaScript权威指南,最著名的javaScript参考用书。被大家亲切的成为犀牛书,是O'Reilly出版集团动物系列书的一分子。

    JAVASCRIPT牛X效果

    JAVASCRIPT牛X效果JAVASCRIPT牛X效果JAVASCRIPT牛X效果

    一个使用JavaScript写的星际争霸网页游戏!超牛..纯JavaScript,值得研究

    《JavaScript实现的星际争霸网页游戏解析》 在互联网技术日新月异的今天,JavaScript作为浏览器端最常用...如果你对JavaScript编程感兴趣,或者想要挑战自我,这个游戏源代码无疑是一个极好的学习资源,值得深入研究。

    犀牛JavaScript第5版上

    JavaScript,一种广泛应用于Web开发...总的来说,无论你是初学者还是有经验的开发者,"犀牛JavaScript第5版"都是一份宝贵的资源,它将帮助你深入理解这门语言的精髓,提升你的编程能力,从而在Web开发领域更上一层楼。

    JavaScript权威指南第五版【新】(犀牛书)

    右键点击chm文档,查看属性,可以看到“安全”提示:此文件来自于其它计算机,可能被阻止以帮助保护该计算机,提示后面有一个“解除锁定”的按钮。选择解除,然后保存修改。 JavaScript权威指南,著名的犀牛书:)...

    JavaScript权威指南(第五版)

    资源名称:Javascript权威指南(第五版)内容简介:《Javascript权威指南第4版》中文版出版至今已有三年多的时间。这本《JaVascript权威指南》连续印刷5次,销售数十万册,成为很多Javascript...

    javascript[超牛]带阴影的可拖动的浮动层

    javascript[超牛]带阴影的可拖动的浮动层,由http://www.che2.com/提供

    JavaScript权威指南(第六版) PDF 高清 带目录

    自1996年以来,JavaScript的:权威指南已为JavaScript圣经程序员,程序员指南和全面的参考,以核心语言和客户端JavaScript API的Web浏览器定义。第6版包括HTML5和ECMAScript 5,与jQuery和服务器端JavaScript新的...

    很牛B的javascript对战系统

    综上所述,"很牛B的javascript对战系统"是一个综合了JavaScript核心技术和前端开发实践的项目,它涉及到了DOM操作、事件处理、动画制作、可能的AJAX通信以及模块化开发等多个方面,体现了JavaScript在构建交互性强、...

    JavaScript高级_javascript_zip_

    2. **原型链(Prototype Chain)**:JavaScript中的对象继承是通过原型链实现的,每个对象都有一个内部属性`__proto__`,指向其构造函数的原型对象。理解原型链对于掌握继承机制至关重要。 3. **函数表达式与函数...

    QiniuDemo:基于七牛javascript sdk的七牛demo

    《七牛Demo:基于七牛JavaScript SDK的实现详解》 七牛云存储作为国内知名的云服务提供商,提供了一套完善的文件存储解决方案。在Web应用开发中,七牛JavaScript SDK是开发者常用于实现文件上传、管理等功能的重要...

    JavaScript 语言参考_javascript_js_

    总的来说,“JavaScript 语言参考”涵盖了从基础到高级的所有JavaScript知识点,无论你是初学者还是有经验的开发者,都可以从中受益。通过深入学习并实践这本书中的内容,你将能熟练掌握JavaScript,从而更好地进行...

    javascript特效大全手册

    这些特效覆盖了网页设计的各个方面,包括动画、交互、图表、导航、图像处理等多个领域,帮助开发者提升网页的用户体验和视觉效果。 首先,JavaScript作为一种强大的客户端脚本语言,其在网页动态效果中的应用至关...

    JavaScript权威指南第6版

    很多章节完全重写,以便与时俱进,紧跟当今的Web开发实践。本书新增章节描述了jQuery和服务器端JavaScript。 本书适合那些希望学习Web编程语言的初、中级程序员和希望精通JavaScript的程序员阅读。

Global site tag (gtag.js) - Google Analytics