js实现图片进度条

最新推荐文章于 2021-09-01 14:31:56 发布

原创最新推荐文章于 2021-09-01 14:31:56 发布 · 608 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

html 专栏收录该内容

2 篇文章

订阅专栏

<html>
<title>js实现图片进度条</title>
<head>

</head>
<script type="text/javascript">
window.onload=setCount;

var timeout = -1;
var setcounttimeout;
var setrepeattimeout;
function setCount()
{
  if(timeout < 0)
  {
   timeout = 0
  }

  timeout = timeout + 1;

  if(timeout <= 100)
  {
   //动态写入正在加载...
   var backgroundbarWidth = 366;
   var size = (backgroundbarWidth/100)*timeout;
   document.getElementById("bar").style.width = size;
   document.getElementById("size").innerHTML = timeout;
   setcounttimeout = setTimeout("setCount()",500);
   init();
  }

  if(timeout > 100)
  {
   clearTimeout(setrepeattimeout);
   clearTimeout(setcounttimeout);
   document.getElementById("msg").innerHTML = "加载完成";
  }
}

function init()
{
  setrepeattimeout = setTimeout("repeat()",500);
}

var count = 0;
function repeat()
{
  if(count < 3)
  {
   count ++;
   document.getElementById("msg").innerHTML += ".";
  }
  else
  {
   document.getElementById("msg").innerHTML = "正在加载";
   count = 0;
  }
}

</script>
<body>
<div id="background" style="position:absolute;width:371px;height:28px;left:105px;top:105px;background-image:url(progressbar_bg.png);background-repeat:no-repeat;z-index:1;"></div>
<div id="bar" style="position:absolute;width:366px;height:28px;left:108px;top:107px;background-image:url(progressbar.png);background-repeat:no-repeat;z-index:2;"></div>
<div id="msg" style="position:absolute;left:250px;top:108px;font-size:11px;z-index:3">正在加载</div>
<div id="size" style="position:absolute;left:480px;top:105px;">0</div>
</body>
</html>