前端js实现动态更新进度条-9

最新推荐文章于 2023-06-25 15:20:30 发布

weixin_34303897

最新推荐文章于 2023-06-25 15:20:30 发布

阅读量324

点赞数

文章标签：前端数据库 python ViewUI

原文链接：https://my.oschina.net/u/1035715/blog/223933

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 进度条 </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="text/html">
<META NAME="Description" CONTENT="有关windows中进度条的实现">
<style type="text/css">
#out{width:300px;height:20px;background:#EEE;}
#in{width:10px; height:20px;background:#778899;color:white;text-align:center;}
#font_color{background:yellow;text-align:center;color:white;}
</style>
</HEAD>
<div οnlοad="start();" >
<div id='out'>
  <div id="in" style="width:10%">10%</div>
<div>
<script type="text/javascript">
  i=0;
  function start()
  {
    ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数
  }
  function begin()
  {
   i+=1;
  if(i<=100)
  {
   document.getElementById("in").style.width=i+"%";
      document.getElementById("in").innerHTML=i+"%";}
  else
  {
      clearInterval(ba);
   document.getElementById("out").style.display="none";
   document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>");
  }
  }
</script>
</div>
</HTML>