HTML 教程

HTML 属性

HTML 标签列表

HTML API

HTML 案例

HTML 颜色

HTML5 进阶

HTML 其它

HTML 面试问题

HTML <progress> 进度标签

HTML <progress> 标签用于显示任务的进度。它为 Web 开发人员提供了一种在网站上创建进度条的简单方法。它主要用于在网页上显示文件上传的进度。

HTML 进度标签是 HTML5 中的新标签，因此您必须使用新的浏览器。

HTML Progress 标签的属性

HTML <progress> 标签支持全局和事件属性以及 2 个特定属性。

标签描述
价值它定义了任务已经完成了多少工作。
最大限度它定义了任务总共需要多少工作。

进度标签应仅用于表示任务的进度，而不仅仅是仪表（磁盘速度使用情况）。为此，使用了 <meter> 元素。

HTML 进度标签示例

让我们看看没有属性的 HTML 进度示例。

<!DOCTYPE>
<html>  
<body>  
<progress></progress>  
</body>
</html>

输出：

让我们看看带有 value 和 max 属性的进度示例。

<!DOCTYPE>
<html>  
<body>  
Downloading progress:  
<progress value="43" max="100"></progress>  
</body>
</html>

输出：

下载进度： 

造型进度条

您可以在进度标签上应用 CSS 代码。

<!DOCTYPE>
<html>  
<head>
<style>
progress{width:300px;height:30px}
</style>
</head>
<body>  
<progress value="50" max="100"></progress>  
</body>
</html>

输出：

带有 JavaScript 的 HTML 进度标签

<progress> 标签应与 JavaScript 结合使用以显示任务的进度。

<!DOCTYPE>
<html>  
<body>  
<script>
var gvalue=1;
function abc(){
 var progressExample = document.getElementById ('progress-javascript-example');
     setInterval (function ()
    { 
                 if(gvalue<100){
                    gvalue++;
                    progressExample.value =gvalue;  
                  }
                 abc();            
      }, 1000);
}
</script>
<progress id="progress-javascript-example" min="1" max="100"></progress>  
<br/><br/>
<button onclick="abc()">click me</button>
</body>
</html>

输出：



支持浏览器

元素ChromeIEFirefoxSafariOpera
<progress>YesYesYesYesYes


上一主题 HTML <pre> 格式化文本标签 下一主题 HTML <q> 引号标签
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具