<rt id="bn8ez"></rt>
<label id="bn8ez"></label>
  • 

    • <span id="bn8ez"></span>
    

    <label id="bn8ez"><meter id="bn8ez"></meter></label>
    

    
    

    




    







												


        

    
	

    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 閱讀(4700) 評論(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>   回復  更多評論
				  
			
    
		

    




    








    

				

    




    







    
        
	



主站蜘蛛池模板：
国产永久免费高清在线|
特级毛片A级毛片免费播放|
最近免费中文字幕MV在线视频3
|
67194成手机免费观看|
亚洲AV无码国产精品色午友在线
|
人妻仑刮八A级毛片免费看|
免费国产在线观看老王影院|
久久亚洲精品无码gv|
四虎影视大全免费入口|
亚洲国产欧美日韩精品一区二区三区|
成人毛片18女人毛片免费视频未|
精品国产日韩久久亚洲|
国产精品深夜福利免费观看|
免费播放国产性色生活片|
亚洲视频在线精品|
久久九九AV免费精品|
亚洲国产综合精品|
成人免费看片又大又黄|
免费大片黄在线观看|
亚洲VA成无码人在线观看天堂|
免费A级毛片无码A∨中文字幕下载|
亚洲欧洲在线播放|
午夜视频在线观看免费完整版|
真正全免费视频a毛片|
亚洲精品午夜无码电影网|
99久久免费观看|
亚洲av永久中文无码精品|
爱情岛论坛网亚洲品质自拍|
久久久久久国产精品免费免费男同
|
日韩电影免费在线观看中文字幕|
亚洲第一成年网站大全亚洲|
国内精品免费视频自在线|
baoyu777永久免费视频|
色天使亚洲综合在线观看|
亚洲AV无码乱码精品国产|
99久久免费中文字幕精品|
国产亚洲精品第一综合|
久久亚洲国产视频|
永久在线毛片免费观看|
两个人看的www免费|
亚洲男人的天堂网站|