简单的变色进度条效果

发表于 2014-10-29 16:36:09

简单的变色进度条效果


                  将下面代码复制到记事本中保存为test.html 看效果
<head>
<script language="java script">
var i=1;
window.setInterval("chal()",50);
function chal(){
   tfl.style.width=i;
tfl.value=i+"%";
losd.style.width=i;
losd.innerHTML=i+"%";
   i++;
if(i==500)
{
   i=0;
   losd.style.background="#36f";
}
if(i>50)
{
   losd.style.background="#ffaacc";
}
if(i>100)
{
   losd.style.background="#aaccff";
}
if(i>150)
{
   losd.style.background="#ffccaa";
}
if(i>200)
{
   losd.style.background="#ccabff";
}
if(i>250)
{
   losd.style.background="yellow";
}
if(i>300)
{
   losd.style.background="pink";
}
if(i>350)
{
   losd.style.background="green";
}
if(i>400)
{
   losd.style.background="brown";
}
if(i>450)
{
   losd.style.background="red";
}
}
</script>
</head>
<input name="tfl" type="text" id="tfl"style="border:none; background-color:#C93; width:10;" align="middle" readonly="readonly"/>
<div id="losd"style=" background:#36F; height:auto; width:10"></div>

帐号		自动登录	找回密码
密码			中文注册

[网页制作] 简单的变色进度条效果