js进度条

最新推荐文章于 2024-04-20 11:16:57 发布

meheartfly

最新推荐文章于 2024-04-20 11:16:57 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： function javascript div input layer filter

本文链接：https://blog.csdn.net/meheartfly/article/details/4553368

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

1.第一个:栅状进度条

<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>
2.第二个==颜色块进度条

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

3.第三个==渐变色进度条

<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 οnlοad="go();">
<div id="bg"><div id="ps"></div><span id="bn">0%</span></div>
</body>
</html>

meheartfly

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
4
评论
js进度条

1.第一个:栅状进度条进度条—qifei var bar=0 var line="||" var amount="||" count() function count(){ bar=bar+2 amount =amount + line document.loading.chart.value=amount document.loading.percent.va
复制链接

扫一扫