Home > Article > Web Front-end > Detailed explanation of the use of html progress tag

Detailed explanation of the use of html progress tag

黄舟Original: 2017-07-08 13:56:193758browse

progress

progress tag defines the progress (process) of a running task.

Properties

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.

Demonstration

3.Create PROGRESS

<!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 element

The 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!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of html browser automatically adding

 tagNext article：Detailed explanation of html browser automatically adding  tag

See more

Detailed explanation of the use of html progress tag

progress

Properties

Related articles