DANCE WITH JAVA
          

          開發出高質量的系統
          

          


          
	
		

          常用鏈接
          

		

          統計
          
	
		

          積分與排名
          


		
		
          好友之家
          
		
				
			
	

		

          最新評論
	
          

          
	
			
		

          
		
	

          

          
	
					
	
          
		
          
			javascript兩種漸變效果進度條的實現
		
          
		
          <html>
          
          <head>
          
          <title>漸變效果進度條</title>
          
          <script language="javascript">
          
           var i;
          
           function go()
          
           {
          
  bar_width           = document.getElementById("bg").clientWidth;
          
  i           = bar_width;
          
  setTimeout('start();',          300);
          
 }
          
           function start()
          
           {
          
            if(i-->0)
          
            {
          
   ps.style.width           = i;
          
   bn.innerHTML           = Math.floor((bar_width-i)/bar_width*100)+"%";
          
   setTimeout('start();',          20);
          
  }
          
 }
          
 
          
          </script>
          
          <style type="text/css">
          
#bg           {
          
filter:progid:DXImageTransform.Microsoft.Gradient
          
(GradientType          =1, StartColorStr=#FFFF00, EndColorStr=#FF0000);
          
width:300px;
          
height:20px;
          
border:1px solid black;
          
z          -index:0;
          
position:absolute;
          
}
          
#ps           {
          
          float:right;
          
background          -color:#FFFF00;
          
width:          100%;
          
}
          
#bn           {
          
position:absolute;
          
text          -align:center;
          
width:          100%;
          
height:          100%;
          
cursor:          default;
          
}
          
          </style>
          
          </head>
          
          <body onload="go();">
          
          <div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
          
          </body>
          
          </html>
          

          

          

          

          <html>
          
          <head>
          
          <title>漸變效果進度條</title>
          
          <script language="javascript">
          
          var _Hex = Array("00","01","02","03","04","05","06","07","08","09",
          
          "0A","0B","0C","0D","0E","0F","10","11","12","13","14","15","16","17","18","19",
          
          "1A","1B","1C","1D","1E","1F","20","21","22","23","24","25","26","27","28","29",
          
          "2A","2B","2C","2D","2E","2F","30","31","32","33","34","35","36","37","38","39",
          
          "3A","3B","3C","3D","3E","3F","40","41","42","43","44","45","46","47","48","49",
          
          "4A","4B","4C","4D","4E","4F","50","51","52","53","54","55","56","57","58","59",
          
          "5A","5B","5C","5D","5E","5F","60","61","62","63","64","65","66","67","68","69",
          
          "6A","6B","6C","6D","6E","6F","70","71","72","73","74","75","76","77","78","79",
          
          "7A","7B","7C","7D","7E","7F","80","81","82","83","84","85","86","87","88","89",
          
          "8A","8B","8C","8D","8E","8F","90","91","92","93","94","95","96","97","98","99",
          
          "9A","9B","9C","9D","9E","9F","A0","A1","A2","A3","A4","A5","A6","A7","A8","A9",
          
          "AA","AB","AC","AD","AE","AF","B0","B1","B2","B3","B4","B5","B6","B7","B8","B9",
          
          "BA","BB","BC","BD","BE","BF","C0","C1","C2","C3","C4","C5","C6","C7","C8","C9",
          
          "CA","CB","CC","CD","CE","CF","D0","D1","D2","D3","D4","D5","D6","D7","D8","D9",
          
          "DA","DB","DC","DD","DE","DF","E0","E1","E2","E3","E4","E5","E6","E7","E8","E9",
          
          "EA","EB","EC","ED","EE","EF","F0","F1","F2","F3","F4","F5","F6","F7","F8","F9",
          
          "FA","FB","FC","FD","FE","FF");
          
           function go()
          
           {
          
  setTimeout('start();',          100);
          
 }
          
           var i=0;
          
           function start()
          
           {
          
            if(i++<256)
          
            {
          
   ps.innerHTML           += "<span style='width:1px;background-color:#FF"+_Hex[256-i]+"00;'>";
          
   bn.innerHTML           = Math.floor(i/2.56)+"%";
          
   setTimeout('start();',          10);
          
  }
          
 }
          
 
          
          </script>
          
          <style type="text/css">
          
#ps           {
          
background          -color:#FFFF00;
          
width:256px;
          
margin: 1px;
          
          float:left;
          
}
          
#bn           {
          
width:39px;
          
margin: 1px;
          
          float:right;
          
text          -align:center;
          
color:#FFFFFF;
          
font          -family:Arial;
          
font          -size:13px;
          
}
          
          </style>
          
          </head>
          
          <body onload="go();">
          

          
          <div style="background-color:black;width:300px;height:20px;"><div id="ps"></div><div id="bn"></div></div>
          
          </body>
          
          </html>
          

          

          
 
		
          
			posted on 2007-09-10 22:58 dreamstone 閱讀(4699) 評論(2)  編輯  收藏  所屬分類: 片段 、腳本語言javascript 
		
          
	
          
	
	


	


          
	    
    


          

          評論
          
	
	
			
          
				# re: javascript兩種漸變效果進度條的實現
					
						2007-09-11 10:05
					
				編程、設計是職業更是愛好
			
          
			
          
				需要改一下才能支持FF  回復  更多評論
				  
			
          
		
			
          
				# re: javascript兩種漸變效果進度條的實現
					
						2010-10-09 15:42
					
				星輝樂園
			
          
			
          
				<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

          <html xmlns="http://www.w3.org/1999/xhtml" > 

          <head> 

          <title>進度條</title> 

          <style type="text/css"> 

          body{ 

          text-align:center; 

          } 

          .graph{ 

          width:450px; 

          border:1px solid #F8B3D0; 

          height:25px; 

          } 

          #bar{ 

          display:block; 

          background:#FFE7F4; 

          float:left; 

          height:100%; 

          text-align:center; 

          } 

          #barNum{ 

          position:absolute; 

          } 

          </style> 

          <script type="text/javascript"> 

          function $(obj){ 

          return document.getElementById(obj); 

          } 

          function go(){ 

          $("bar").style.width = parseInt($("bar").style.width) + 1 + "%"; 

          $("bar").innerHTML = $("bar").style.width; 

          if($("bar").style.width == "100%"){ 

          window.clearInterval(bar); 

          } 

          

          } 

          var bar = window.setInterval("go()",50); 

          window.onload = function(){ 

          bar; 

          } 

          </script> 

          </head> 

          <body> 

          <div class="graph"> 

          <strong id="bar" style="width:1%;"></strong> 

          </div> 

          </body> 

          </html>   回復  更多評論
				  
			
          
		

          




          








          

				

          




    







          
        
	




主站蜘蛛池模板：
嘉荫县|
民乐县|
阜新市|
灵宝市|
富源县|
尤溪县|
客服|
富川|
隆林|
福建省|
德钦县|
芮城县|
东港市|
平江县|
贵溪市|
涪陵区|
阿城市|
常熟市|
宁阳县|
武穴市|
许昌市|
江山市|
唐河县|
河曲县|
格尔木市|
巴东县|
鄂州市|
分宜县|
海伦市|
河南省|
张家口市|
房山区|
贵溪市|
务川|
鹤庆县|
安达市|
城口县|
望奎县|
星子县|
慈利县|
綦江县|