渐变效果进度条

最新推荐文章于 2023-10-24 10:35:11 发布

akglk

最新推荐文章于 2023-10-24 10:35:11 发布

阅读量1k

点赞数

分类专栏： html及javascript 文章标签： function javascript filter border float go

html及javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

akglk

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
渐变效果进度条

渐变效果进度条 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.innerH
复制链接

扫一扫