添加进度条和浮动框

一、 进度条

  1 <table id="load" width="700" border="0" align="center" bgcolor="#FAFAFA" cellpadding="0" cellspacing="0" bordercolor="#000000" style="border-collapse:collapse;display:none ">
  2 
  3   <tr>
  4 
  5     <td><br><br>
  6 
  7     <table width="100%" border="1" cellspacing="0" cellpadding="0" bordercolor="#287BCE" style="border-collapse:collapse ">
  8 
  9         <tr bgcolor="#F7F7F6">
 10 
 11           <td width="20%" height="100" valign="middle">
 12 
 13     <table align='center' width='500'>
 14 
 15       <tr>
 16 
 17        <td colspan='2' align='center' id="progressPersent"><font size="2">
 18 
 19         正在进行保存，用时较长，请稍后...
 20 
 21         </font>
 22 
 23        </td>
 24 
 25       </tr>
 26 
 27       <tr>
 28 
 29         <td id='tdOne' height='25' width=1 bgcolor="blue"> </td>
 30 
 31         <td id='tdTwo' height='25' width=500 bgColor='#999999'> </td>
 32 
 33       </tr>
 34 
 35     </table>
 36 
 37           </td>
 38 
 39         </tr>
 40 
 41     </table>
 42 
 43     </td>
 44 
 45   </tr>
 46 
 47 </table>
 48 
 49 Js:
 50 
 51 /**添加不带百分比的进度条*/
 52 
 53    var len = 500 ;
 54 
 55 var add = 0 ;
 56 
 57 function openContenFrame(){
 58 
 59     var td1 = document.getElementById('tdOne') ;
 60 
 61     var td2 = document.getElementById('tdTwo') ;
 62 
 63     add = add+10 ;
 64 
 65     td1.width = add ;
 66 
 67     if(len - add <= 0){
 68 
 69        td2.width = 1 ;
 70 
 71     }else{
 72 
 73        td2.width = len - add ;
 74 
 75     }
 76 
 77     if(add<=len) {
 78 
 79    ;
 80 
 81     }else{
 82 
 83        td1.width = 1 ;
 84 
 85        td2.width = 500 ;
 86 
 87        add = 0 ;
 88 
 89     }
 90 
 91     setTimeout('openContenFrame()',100) ;
 92 
 93 }
 94 
 95 function loading(){
 96 
 97     document.getElementById("load").style.display="";
 98 
 99     document.getElementById("opperate1").style.display="none";
100 
101     document.getElementById("opperate2").style.display="none";
102 
103     openContenFrame();
104 
105 }

 

二、 js浮动框

 1 css:
 2 
 3 <!-- 浮动窗口样式css begin -->
 4 
 5 <style type="text/css">
 6 
 7 #msg_win{border:1px solid #A67901;background:#EAEAEA;width:240px;position:absolute;right:0;font-size:12px;font-family:Arial;margin:0px;display:none;overflow:hidden;z-index:99;}
 8 
 9 #msg_win .icos{position:absolute;top:2px;*top:0px;right:2px;z-index:9;}
10 
11 .icos a{float:left;color:#833B02;margin:1px;text-align:center;font-weight:bold;width:14px;height:22px;line-height:22px;padding:1px;text-decoration:none;font-family:webdings;}
12 
13 .icos a:hover{color:#fff;}
14 
15 #msg_title{background:#BBDEF6;border-bottom:1px solid #A67901;border-top:1px solid #FFF;border-left:1px solid #FFF;color:#000;height:25px;line-height:25px;text-indent:5px;}
16 
17 #msg_content{margin:5px;margin-right:0;width:230px;height:126px;overflow:hidden;}
18 
19 </style>
20 
21 <!-- 浮动窗口样式css end -->

 

 

浮动窗口Html:

 1 <!-- 浮动窗口html代码 begin -->
 2 
 3 <hr>
 4 
 5 <div id="msg_win" style="display:block;top:490px;visibility:visible;opacity:1;">
 6 
 7 <div class="icos">
 8 
 9 <a id="msg_min" title="最小化" href="javascript:void 0">_</a><a id="msg_close" title="关闭" href="javascript:void 0">×
10 
11 </a>
12 
13 </div>
14 
15 <div id="msg_title">
16 
17 设备运行情况-->
18 
19 </div>
20 
21 <div id="msg_content" style="overflow:auto;height:150px;width:100%;white-space:nowrap">
22 
23 <s:property value="devRun" escape="false"/>
24 
25  
26 
27 </div>
28 
29 </div>
30 
31 <!-- 浮动窗口html代码 end -->

 

 

浮动窗口Js:

  1 <!-- 浮动窗口js，必须要放置到最后  begin-->
  2 
  3 <script language="javascript">
  4 
  5 var Message={
  6 
  7 set: function() {//最小化与恢复状态切换
  8 
  9 var set=this.minbtn.status == 1?[0,1,'block',this.char[0],'最小化']:[1,0,'none',this.char[1],'展开'];
 10 
 11 this.minbtn.status=set[0];
 12 
 13 this.win.style.borderBottomWidth=set[1];
 14 
 15 this.content.style.display =set[2];
 16 
 17 this.minbtn.innerHTML =set[3]
 18 
 19 this.minbtn.title = set[4];
 20 
 21 this.win.style.top = this.getY().top;
 22 
 23 },
 24 
 25 close: function() {//关闭
 26 
 27 this.win.style.display = 'none';
 28 
 29 window.onscroll = null;
 30 
 31 },
 32 
 33 setOpacity: function(x) {//设置透明度
 34 
 35 var v = x >= 100 ? '': 'Alpha(opacity=' + x + ')';
 36 
 37 this.win.style.visibility = x<=0?'hidden':'visible';//IE有绝对或相对定位内容不随父透明度变化的bug
 38 
 39 this.win.style.filter = v;
 40 
 41 this.win.style.opacity = x / 100;
 42 
 43 },
 44 
 45 show: function() {//渐显
 46 
 47 clearInterval(this.timer2);
 48 
 49 var me = this,fx = this.fx(0, 100, 0.1),t = 0;
 50 
 51 this.timer2 = setInterval(function() {
 52 
 53 t = fx();
 54 
 55 me.setOpacity(t[0]);
 56 
 57 if (t[1] == 0) {clearInterval(me.timer2) }
 58 
 59 },10);
 60 
 61 },
 62 
 63 fx: function(a, b, c) {//缓冲计算
 64 
 65 var cMath = Math[(a - b) > 0 ? "floor": "ceil"],c = c || 0.1;
 66 
 67 return function() {return [a += cMath((b - a) * c), a - b]}
 68 
 69 },
 70 
 71 getY: function() {//计算移动坐标
 72 
 73 var d = document,b = document.body, e = document.documentElement;
 74 
 75 var s = Math.max(b.scrollTop, e.scrollTop);
 76 
 77 var h = /BackCompat/i.test(document.compatMode)?b.clientHeight:e.clientHeight;
 78 
 79 var h2 = this.win.offsetHeight;
 80 
 81 return {foot: s + h + h2 + 2+'px',top: s + h - h2 - 2+'px'}
 82 
 83 },
 84 
 85 moveTo: function(y) {//移动动画
 86 
 87 clearInterval(this.timer);
 88 
 89 var me = this,a = parseInt(this.win.style.top)||0;
 90 
 91 var fx = this.fx(a, parseInt(y));
 92 
 93 var t = 0 ;
 94 
 95 this.timer = setInterval(function() {
 96 
 97 t = fx();
 98 
 99 me.win.style.top = t[0]+'px';
100 
101 if (t[1] == 0) {
102 
103 clearInterval(me.timer);
104 
105 me.bind();
106 
107 }
108 
109 },10);
110 
111 },
112 
113 bind:function (){//绑定窗口滚动条与大小变化事件
114 
115 var me=this,st,rt;
116 
117 window.onscroll = function() {
118 
119 clearTimeout(st);
120 
121 clearTimeout(me.timer2);
122 
123 me.setOpacity(0);
124 
125 st = setTimeout(function() {
126 
127 me.win.style.top = me.getY().top;
128 
129 me.show();
130 
131 },600);
132 
133 };
134 
135 window.onresize = function (){
136 
137 clearTimeout(rt);
138 
139 rt = setTimeout(function() {me.win.style.top = me.getY().top},100);
140 
141 }
142 
143 },
144 
145 init: function() {//创建HTML
146 
147 function $(id) {return document.getElementById(id)};
148 
149 this.win=$('msg_win');
150 
151 var set={minbtn: 'msg_min',closebtn: 'msg_close',title: 'msg_title',content: 'msg_content'};
152 
153 for (var Id in set) {this[Id] = $(set[Id])};
154 
155 var me = this;
156 
157 this.minbtn.onclick = function() {me.set();this.blur()};
158 
159 this.closebtn.onclick = function() {me.close()};
160 
161 this.char=navigator.userAgent.toLowerCase().indexOf('firefox')+1?['_','::','×']:['0','2','r'];//FF不支持webdings字体
162 
163 this.minbtn.innerHTML=this.char[0];
164 
165 this.closebtn.innerHTML=this.char[2];
166 
167 setTimeout(function() {//初始化最先位置
168 
169 me.win.style.display = 'block';
170 
171 me.win.style.top = me.getY().foot;
172 
173 me.moveTo(me.getY().top);
174 
175 },0);
176 
177 return this;
178 
179 }
180 
181 };
182 
183 Message.init();
184 
185 </script>
186 
187 <!-- 浮动窗口js end-->

 

 

 

三、 highslide

 1 引入：
 2 
 3 <LINK href="${pageContext.request.contextPath }/css/openView.css" type="text/css" rel="stylesheet">
 4 
 5 <script type="text/javascript" src="${pageContext.request.contextPath }/script/highslide/highslide.js"></script>
 6 
 7 <script type="text/javascript" src="${pageContext.request.contextPath }/script/highslide/highslide-html.js"></script>
 8 
 9  
10 
11  
12 
13 Js：
14 
15   <script type="text/javascript">    
16 
17     hs.graphicsDir = '${pageContext.request.contextPath }/script/highslide/graphics/';
18 
19     hs.outlineType = 'rounded-white';
20 
21     hs.outlineWhileAnimating = true;
22 
23   </script>
24 
25 Html:
26 
27 <td style="HEIGHT:22px" align="center" width="40%">
28 
29 <div>
30 
31 <a style="CURSOR:hand" href="${pageContext.request.contextPath }/system/elecCommonMsgAction_actingView.do?" οnclick="return hs.htmlExpand(this, { contentId: 'highslide-html-1', objectType: 'ajax', preserveContent: true} )">
32 
33 <div class="scrollStyle" align="left" style="table-layout:fixed;">
34 
35 查看设备详细信息
36 
37 </div>
38 
39 </a>
40 
41 <div class="highslide-html-content" id="highslide-html-1" style="width: 700px">
42 
43 <div class="highslide-move" style="border: 0; height: 18px; padding: 2px; cursor: default">
44 
45 <a href="#" onClick="return hs.close(this)" class="control">[关 闭]</a>
46 
47 </div>
48 
49 <div class="highslide-body"></div>
50 
51 </div>
52 
53 </div>
54 
55  
56 
57 </td>
58 
59 JSP:
60 
61 <%@ page language="java" pageEncoding="UTF-8"%>
62 
63 <%@ taglib uri="/struts-tags" prefix="s"%>
64 
65 <html>
66 
67 <head>
68 
69     <title>显示运行监控记录</title>
70 
71     <LINK href="${pageContext.request.contextPath }/css/Style.css" type="text/css" rel="stylesheet">
72 
73 </head>
74 
75 <body>
76 
77 <table cellspacing="1" cellpadding="0" width="100%" align="center" bgcolor="#f5fafe" border="0">
78 
79 <TR height="10">
80 
81 <td class="ta_01">
82 
83 <s:property value="devRun"/>
84 
85 </td>
86 
87 </TR>
88 
89     </table>
90 
91     
92 
93 </body>
94 
95 </html>

 

转载于:https://www.cnblogs.com/xiaotimo/p/5109345.html