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

Table of Contents

progress

Properties" >Properties

Home

Web Front-end

HTML Tutorial

Detailed explanation of the use of html progress tag

黄舟

Jul 08, 2017 pm 01:56 PM

html progress Detailed explanation

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!

Statement of this Website

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