| 标题 | 用htc实现进度条控件 |
| 内容 | 代码如下: <PUBLIC:COMPONENT> <PUBLIC:METHOD NAME ="Init" INTERNALNAME ="fnCreateProgressBar" /> <PUBLIC:METHOD NAME ="showProgress" INTERNALNAME ="showProgress" /> <PUBLIC:PROPERTY NAME="Container"/> <PUBLIC:PROPERTY NAME="Speed"/> <SCRIPT LANGUAGE=javascript> var startTime = null ; function fnCreateProgressBar(){ now = new Date(); startTime = now.getTime(); now = null oContainer = element.Container oContainer.innerHTML = ""; oDiv = window.document.createElement("DIV") oDiv.className = "progress" oContainer.appendChild(oDiv) oDiv.style.display = ""; element.bar = oDiv; } function pause(numberMillis) { var dialogScript = 'window.setTimeout(' + ' function () { window.close(); }, ' + numberMillis + ');'; var result = window.showModalDialog( 'javascript:document.writeln(' + '"<script>' + dialogScript + '<' + '/script>")'); } function showProgress(StatesDesc){ now = new Date(); currTime = now.getTime(); now = null if(StatesDesc!=null) window.status = StatesDesc+"当前耗时:"+(currTime - startTime)+"毫秒!"; element.bar.style.width = (currTime - startTime) / element.Speed; pause(1) } </script> </PUBLIC:COMPONENT> 应用例子: 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>进度条测试</title> <link rel="stylesheet" type="text/css" href="ProgressBar.css"> <script> function Demo(){ PrgBar.Container = document.all.layer1 PrgBar.Init(); for(var i=0;i<500;i++){ if(i%5==0) PrgBar.showProgress("操作进行中......") } PrgBar.showProgress("操作完成!") } </script> </head> <body> <div id="layer1"></div> <p><input type="button" value="测试" name="B3" onclick="Demo()"></p> <Progressbar id="PrgBar" Speed="10"/> </body> </html> 样式文件:ProgressBar.css 代码如下: .ProgressBar { BEHAVIOR: url("ProgressBar.htc") } .progress{ position: relative; width: 0px; height: 20px; z-index: 1; background-color: #006699; filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#006699,endcolorstr=#E3EFFF,gradientType=0); border: 1px ridge #C0C0C0; } |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。