Detailed explanation of the use of html progress tag-HTML Tutorial-php.cn

Detailed explanation of the use of html progress tag

黄舟

Release： 2017-07-08 13:56:19

Original

3809 people have browsed it

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>

Copy after login

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>

Copy after login

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!

tag Next article：Introduction to the progress element of the progress bar in HTML5 and its compatibility processing