HTML <progress>标签
HTML <progress>标签
HTML <progress>标签用于显示任务的<progress>。它为Web开发人员提供了一种在网站上创建<progress>栏的简便方法。它主要用于显示网页上文件的上传<progress>。
HTML<progress>标签是HTML5中的新增功能，因此您必须使用新的浏览器。
HTML<progress>标签的属性
HTML <progress>标签支持全局和事件属性以及两个特定属性。
| 标签 |
说明 |
| 值 |
它定义任务已完成多少工作。 |
| max |
它定义了任务总共需要多少工作。 |
注意:<progress>标签应仅用于表示任务的<progress>，而不能仅用于衡量指标（磁盘速度使用情况）。为此，使用<meter>元素。
HTML<progress>标签示例
我们看看没有属性的HTML<progress>示例。
输出:
让我们看一下带有value和max属性的<progress>示例。
下载进度:
<progress value="43" max="100"></progress>
输出:
下载进度:
<progress>样式
您可以在<progress>标签上应用CSS代码。
progress{
width: 300px;
height: 30px;
}
输出:
带有JavaScript的HTML Progress标签
<progress>标签应与JavaScript结合使用，以显示任务的<progress>。
<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>
输出:
支持浏览器
