js进度条

caozuiba

浏览: 904710 次

最近访客更多访客>>

wangyy

u012363178

langke93

Torero

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1386)

社区版块

存档分类

----------------------------------------------------------------
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>

</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.onload=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>
————————————————————————————

分享到：