用htc實現(xiàn)進(jìn)度條控件

2020-01-25 18:09:06

字體：大中小

供稿：網(wǎng)友

代碼如下:

	
	<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+"當(dāng)前耗時:"+(currTime - startTime)+"毫秒!"; 
	        element.bar.style.width = (currTime - startTime) / element.Speed; 
	        pause(1) 
	    } 
	</script> 
	</PUBLIC:COMPONENT>

應(yīng)用例子:

復(fù)制代碼代碼如下:

	
	<html> 
	
	<head> 
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> 
	<title>進(jìn)度條測試</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("操作進(jìn)行中......") 
	    } 
	    PrgBar.showProgress("操作完成!") 
	} 
	</script> 
	</head> 
	
	<body> 
	<div style="position: absolute; width: 612px; height: 19px; z-index: 1; left: 10px; top: 72px; border-style: solid; border-width: 1px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" id="layer1"></div> 
	<p><input type="button" value="測試" name="B3" onclick="Demo()"></p> 
	<Progressbar id="PrgBar" class="ProgressBar" Speed="10"/> 
	</body> 
	
	</html>

樣式文件:ProgressBar.css

復(fù)制代碼代碼如下:

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