javascript两种渐变效果进度条的实现 -凯发k8网页登录

开发出高质量的系统

常用链接

统计

积分与排名

好友之家

最新评论

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 
= ""_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 阅读(4600) 评论(2)  编辑  收藏 所属分类: 片段脚本语言javascript

# re: javascript两种渐变效果进度条的实现 2007-09-11 10:05

需要改一下才能支持ff  回复     

# re: javascript两种渐变效果进度条的实现 2010-10-09 15:42

" target="_new" rel="nofollow">http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml" >

进度条








  回复     
网站地图