（19）HTML5 ＜progress＞标签

最新推荐文章于 2022-04-25 16:49:44 发布

泽哥ins

最新推荐文章于 2022-04-25 16:49:44 发布

阅读量527

点赞数

分类专栏： HTML5 文章标签： html5 html

本文链接：https://blog.csdn.net/qq_36213140/article/details/122034782

版权

HTML5 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一、浏览器支持

IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。

注：IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。

二、标签定义及使用说明

<progress> 标签定义运行中的任务进度（进程）。它是H5新增的标签。

三、提示和注释

提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。

注释：<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或相关的查询结果）。表示度量衡，请使用<meter>标签代替。

四、属性

五、下载进度条案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>h5之progress标签</title>
</head>
<body>
  <progress id='progress1' value="0" max="100">
  </progress>
  <button onclick="start_run(100)">下载</button>
  <script>
  function start_run(n)
  {
      if(n==0){alert("下载完成")}
      var progress1=document.getElementById("progress1")
      n=n-1
      cur_task=100-n
      progress1.value=cur_task
      setTimeout("start_run("+n+")",100) 
  }
  </script>
</body>
</html>

泽哥ins

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
（19）HTML5 ＜progress＞标签

一、浏览器支持IE 10、Firefox、Opera、Chrome 和 Safari 6 支持 <progress> 标签。注：IE 9 或者更早版本的 IE 浏览器不支持 <progress> 标签。二、标签定义及使用说明<progress> 标签定义运行中的任务进度（进程）。它是H5新增的标签。三、提示和注释提示：请将 <progress> 标签与 JavaScript 一起使用来显示任务的进度。注释：<progress&
复制链接

扫一扫