집 > 기사 > 웹 프론트엔드 > html 진행 태그 사용에 대한 자세한 설명

html 진행 태그 사용에 대한 자세한 설명

黄舟원래의: 2017-07-08 13:56:193773검색

progress

progress 태그는 실행 중인 작업의 진행률(프로세스)을 정의합니다. progress 标签定义运行中的任务进度（进程）。

属性

属性	值	描述
max	number	规定要完成的最大值
value	number	规定进程的当前值
position	float	返回进度条的当前位置
labels	-	返回进度条的标记列表(如有)

max缺省情况下进度值范围从0.0~1.0,如果设置成max=100,则进度取值范围从0~100.
value规定当前值,若max=100,value=50则进度刚好一半.value属性的存在与否决定了progress进度条是否具有确定性.当没有value时,浏览器进度条会无限循环,但是,一旦有了value属性(即使没有值),也被认为是确定的.
position是只读属性,该属性反映了当前进度的位置,就是value/max的值.
labels也是只读属性,得到的是指向该progress
속성

속성	값	설명
max	숫자	완료할 최대값을 지정합니다
값	숫자	지정 프로세스 현재 값
위치	float	반환 진행률 표시줄의 현재 위치
labels	-	진행률 표시줄의 태그 목록을 반환합니다(있는 경우)

max

0.0~1.0

max=100

0~100입니다.

position은 현재 진행 위치를 반영하는 읽기 전용 속성입니다. value/max.

3. 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를 만듭니다. 위치 속성을 사용하세요🎜

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

🎜HTML5 진행 요소 스타일 제어, 호환성 및 예제🎜

위 내용은 html 진행 태그 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：

 태그를 자동으로 추가하는 HTML 브라우저에 대한 자세한 설명다음 기사： 태그를 자동으로 추가하는 HTML 브라우저에 대한 자세한 설명