Home >Web Front-end >HTML Tutorial >Detailed explanation of the use of html progress tag
progress tag defines the progress (process) of a running task.
| Properties | Value | Description |
|---|---|---|
| max | number | Specifies the maximum value to be accomplished |
| value | number | Specifies the current value of the process |
| position | float | ReturnProgress bar 's current position |
| labels | - | Returns the progress bar's label list (if any) |
maxThe default progress value range is from 0.0~1.0, if set to max=100 , then the progress value range is from 0~100.
##value specifies the current value, if max=100 ,value=50, then the progress is exactly half. The existence of the value attribute determines whether the progress progress bar has determinism. When When there is no value, the browser progress bar will loop infinitely. However, once there is a value attribute (even if there is no value), it is considered to be certain.
position is a read-only attribute, which reflects the current progress position, which is the value of value/max.
labels is also a read-only attribute, and what is obtained is the label elements pointing to the progress element.
<!DOCTYPE html>
<html>
<head>
<title>progress</title>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript">
function myFunction()
{
var x=document.createElement("PROGRESS");
x.setAttribute("value","80");
x.setAttribute("max","100");
document.body.appendChild(x);
}
</script>
<body>
创建PROGRESS:
<button onclick="myFunction()" id="myprogress">创建</button>
</body>
</html>4.Use the Position attribute <!DOCTYPE html>
<html>
<head>
<title>progress</title>
<meta charset="utf-8">
</head>
<body>
<script>
function myFunction()
{
var x = document.getElementById("myProgress").position;
document.getElementById("demo").innerHTML = x;
}
</script>
<body>
<p>下载进度条:</p>
<progress id="myProgress" value="50" max="100"></progress>
<p id="demo"></p>
<button onclick="myFunction()">获取进度值</button>
</body>
</html>Style control, compatibility and examples of HTML5 progress elementThe above is the detailed content of Detailed explanation of the use of html progress tag. For more information, please follow other related articles on the PHP Chinese website!