js进度条

最新推荐文章于 2021-08-20 16:52:20 发布

码出钞能力

最新推荐文章于 2021-08-20 16:52:20 发布

阅读量4.2k

点赞数

分类专栏：前端技术文章标签： function javascript textbox div html ie

本文链接：https://blog.csdn.net/flynetcn/article/details/1494496

版权

前端技术专栏收录该内容

56 篇文章 0 订阅

订阅专栏

----------------------------------------------------------------
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.ο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>
————————————————————————————