HTml5中progress元素

最新推荐文章于 2023-05-02 11:48:17 发布

宿陌

最新推荐文章于 2023-05-02 11:48:17 发布

阅读量993

点赞数

分类专栏： HTML5 文章标签：基本元素

本文链接：https://blog.csdn.net/qq_37860994/article/details/80161046

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

使用progress标记元素实现进度条效果

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>使用progress元素</title>
  <style type="text/css">
    body{
    font-size:12px}
    p{
      padding:0px;
      margin:0px;
    }
    .inputbtn{
      border:solid 1px #ccc;
      background-color:#eee;
      line-height:18px;
      font-size:12px;
    }
  </style>
 </head>
 <body>
 <script type="text/javascipt">
  var intValue=0;
  var intTimer;
  var objPro=document.getElementById('proDownFile');
  var objTip=document.getElementById('pTip');
  //定时事件
  function Interval_handler(){
    intValue++;
    objPro.value=intValue;
    if(intValue>=objPro.max){
       clearInterval(intTimer);
       objTip.innerHTML="下载已经完成！";
    }
    else{
    objTip.innerHTML="正在下载中"+intValue+"%";
    }
  }
  //下载按钮点击事件
  function Btn_Click(){
  intTimer=setInterval(Interval_handler,100);
  }
  </script>
  <p id="pTip">开始下载</p>
  <progress value="0" max="100" id="proDownFile"></progress>
  <input type="button" value="下载按钮" class="inputbtn" onclick="Btn_Click()">
 </body>
</html>

宿陌

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTml5中progress元素

使用progress标记元素实现进度条效果&amp;lt;!doctype html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;使用progress元素
复制链接

扫一扫

专栏目录