js进度条

----------------------------------------------------------------
ie下测试通过:
<script language="JavaScript">
var ie5 = (document.all&&document.getElementsByTagName);
var step = 0;
function setSB(v,el,inforEl,message) {
    if (ie5 || document.readyState == "complete") {
    filterEl = el.children[0];
    valueEl = el.children[1];
   
        if (filterEl.style.pixelWidth > 0) {
        var filterBackup = filterEl.style.filter;
        filterEl.style.filter = "";
        filterEl.style.filter = filterBackup;
        }
   
    filterEl.style.width = v + "%";
    valueEl.innerText = v + "%";
    inforEl.innerText = message;
    }
}
function setSBByStep(v,el,inforEl,message) {
    if (ie5 || document.readyState == "complete") {
    step = step + v;
    filterEl = el.children[0];
    valueEl = el.children[1];
   
        if (filterEl.style.pixelWidth > 0) {
        var filterBackup = filterEl.style.filter;
        filterEl.style.filter = "";
        filterEl.style.filter = filterBackup;
        }
   
    filterEl.style.width = step + "%";
    valueEl.innerText = step + "%"
    inforEl.innerText = message;
    }
}

window.onload = new Function("setSB(100,sb,infor,'loading completed')")

function fakeProgress(v,el) {
    if (v >= 101)
    location.href="index.htm";
    else {
    setSB(v,el,infor,"");
    window.setTimeout("fakeProgress(" + (v + 1) + ", document.all['" + el.id + "'])", 100);
    }
}
</script>
<html>
<head>
<title>进度条—qifei</title>
</head>
<body onLoad="fakeProgress(0,sb)">
<table width="50%" height="40" align="center">
<tr>
<td width="100%" height="34" align="center">
<div id=sb style="BORDER-RIGHT:white 2px inset; BORDER-TOP:white 2px inset; BACKGROUND:white; BORDER-LEFT:white 2px inset; WIDTH: 200px; BORDER-BOTTOM:white 2px inset; HEIGHT:10px; TEXT-ALIGN:left">
      <div id=sbChild1 style="FILTER:Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0); WIDTH:0%; POSITION:absolute; HEIGHT:6px">
          <div style="FONT-SIZE:1px; BACKGROUND:highlight; WIDTH:100%; HEIGHT:100%"></div>
      </div>
      <div style="FONT-SIZE:12px; WIDTH:100%; COLOR:black; FONT-FAMILY:arial; POSITION:absolute; TEXT-ALIGN:center; left:398px; top:33px;">0%</div>
</div>
<div id=infor style="FONT-SIZE:12px; WIDTH:100%; COLOR:black; FONT-FAMILY:arial; POSITION:relative; TEXT-ALIGN:center"></div>
</td>
</tr>
</table>
</body>
</html>
————————————————————————————
 ie和firefox下测试通过:
<html>
<head>
<title>进度条—qifei</title>
</head>
<body>
<form name=loading>
  <p align=center>
    <input type=text name=chart size=46 style="font-family:Arial; font-weight:bolder; color:#ffffff; background-color:#0099ff; padding:0px; border-style:none;">
    <br>
    <input type=text name=percent size=47 style="color:#0099ff; text-align:center; border-width:medium; border-style:none;">
  </p>
</form>
</body>
</html>
<script>
var bar=0
var line="||"
var amount="||"
count()
function count()
{
bar=bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if (bar<99)
   {setTimeout("count()",50);}
else
   {window.location = "index.html";}
}
</script>
————————————————————————————
ie下测试通过:
<HTML xmlns:v>  
<HEAD> 
<TITLE>VML进度条—qifei</TITLE>  
<STYLE>  
v/:*{behavior:url(#default#VML);}  
*{font-size:12px;color:;}  
</STYLE>  
</HEAD>  
<BODY topmargin='2' leftmargin='2'>  
<div style='table-Layout:fixed;width:100%;height:100%;border:1 solid black'>  
    <v:RoundRect id='a' style='position:absolute;left:300;top:250;height:29;'>  
        <v:Textbox inset='5px,5px,5px'><b><font color='red' id='jindu'></font></b></v:textbox>  
        <v:fill type='gradient' id='fillid' color='blue'/>  
    </v:RoundRect>  
</div>
</BODY>  
</HTML> 
<script>  
//原作:风云舞,载自:http://www.lshdic.com/bbs  
var posnow=1,posall=100     //定义全局变量,posnow为当前进度,posall为总进度  
function play()  //播放函数
{     
if(posnow<posall)
  {posnow+=1;}
else
  {posnow=1;fillid.color="rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+")"}  
a.style.width=Math.round(300/(posall/posnow));
jindu.innerText=posnow+"/"+posall+","+Math.round(100/(posall/posnow))+"%"  
fillid.angle=Math.round(300/(posall/posnow))  
}  
setInterval("play()",10)   //10毫秒播放一次,一般CPU保证能消化~~~  
</script>
————————————————————————————
ie下测试通过:
<html>  
<head>  
<title>进度条—qifei</title>  
<style>  
<!--  
#bar,   #barbackground{  
position:absolute;  
left:0;  
top:0;  
background-color:blue;  
}  
#barbackground{  
background-color:black;  
}  
-->  
</style>  
<script language="JavaScript">  
var   duration=5  
function postaction(){}  
var   clipright=0  
var   widthIE=0  
var   widthNS=0  
function initializebar()
{  
    if (document.all)
    {  
    baranchor.style.visibility="visible"  
    widthIE=bar.style.pixelWidth  
    startIE=setInterval("increaseIE()",50)  
    }  
    if (document.layers)
    {  
    widthNS=document.baranchorNS.document.barbackgroundNS.clip.width  
    document.baranchorNS.document.barNS.clip.right=0  
    document.baranchorNS.visibility="show"  
    startNS=setInterval("increaseNS()",50)  
    }  
}
 
function increaseIE()
{  
bar.style.clip="rect(0   "+clipright+"   auto   0)"  
window.status="Loading..."  
if (clipright<widthIE)  
    clipright=clipright+(widthIE/(duration*20))  
else
    {  
    window.status=''  
    clearInterval(startIE)  
    postaction()  
    }  
}
 
function increaseNS()
{  
if (clipright<202)
    {  
    window.status="Loading..."  
    document.baranchorNS.document.barNS.clip.right=clipright  
    clipright=clipright+(widthNS/(duration*20))  
    }  
else
    {  
    window.status=''  
    clearInterval(startNS)  
    postaction()  
    }  


window.οnlοad=initializebar  
</script>  
</head>  
<body bgcolor="#FFFFFF">  
<script language="JavaScript">  
if (document.all)
{  
document.write('<div   id="baranchor"   style="position:relative;width:200px;height:20px;visibility:hidden;">')  
document.write('<div   id="barbackground"   style="width:200px;height:20px;z-index:9"></div>')  
document.write('<div   id="bar"   style="width:200px;height:20px;z-index:10"></div>')  
document.write('</div>')  
}  
</script>
<ilayer name="baranchorNS" visibility="hide" width=200 height=20>  
    <layer name="barbackgroundNS" bgcolor=black width=200 height=20 z-index=10 left=0 top=0></layer>  
    <layer name="barNS" bgcolor=blue width=200 height=20 z-index=11 left=0 top=0></layer>  
</ilayer>  
</body>  
</html>  
————————————————————————————
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值