渐变效果进度条

最新推荐文章于 2025-05-12 17:20:19 发布

转载最新推荐文章于 2025-05-12 17:20:19 发布 · 1.1k 阅读

标签

#function #javascript #filter #border #float

#go

收录于

html及javascript 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及JavaScript实现的渐变效果进度条。通过定时更新进度条宽度来显示任务完成的百分比，并利用CSS渐变属性为进度条添加视觉效果。

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