html 진행 태그 사용에 대한 자세한 설명-HTML 튜토리얼-php.cn

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

黄舟

풀어 주다： 2017-07-08 13:56:19

원래의

3809명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!