집 > 기사 > 웹 프론트엔드 > HTML5의 진행 요소에 대한 자세한 소개 및 호환성 처리

HTML5의 진행 요소에 대한 자세한 소개 및 호환성 처리

php中世界最好的语言원래의: 2017-12-02 13:24:572202검색

이 글에서는 주로 Progress 요소의 기본 속성과 호환성 처리에 대해 소개합니다. 진행 요소를 소개한 후 다음 사례도 모두가 이를 더 잘 이해하는 데 도움이 될 것입니다. ,

1. 진행률 요소의 기본 이해

1. 기본 UI

진행률 요소는 HTML5 제품군에 속하며 진행률 표시줄을 나타냅니다. IE10+ 및 기타 안정적인 브라우저에서 지원됩니다. 다음은 간단한 코드입니다.

XML/HTML 코드는 내용을 클립보드에 복사합니다.

<progress>o(︶︿︶)o</progress>

매우 흥미로운 진행률 표시줄입니다. 어떤 사람들은 "아~ 왜 문자 이모티콘이 보이죠?"라고 궁금해하실 겁니다. "당신을 경멸합니다. 왜 그렇게 안정적인 브라우저를 사용하기를 꺼리시나요?" 기본값입니다. 아래 스크린샷(Windows 7)에 표시된 것처럼 브라우저마다 효과가 다릅니다.

호환성

IE10 입자의 느리게 움직이는 수렴 효과는 매우 눈길을 끕니다.

2. 기본 속성

max, value,

position

, labels. (1) max는 최대값을 의미합니다. 기본값인 경우 진행 값 범위는 0.0~1.0입니다. max=100으로 설정하면 진행 값 범위는 0~100입니다.

(2) 값은 max=100, 값=50인 값입니다. 진행 상황은 정확히 절반입니다. value 속성의 유무에 따라 진행 진행률 표시줄이 결정적인지 여부가 결정됩니다. 무슨 뜻인가요? 예를 들어, 6ecb87e5318a36c03c59e25d55f43372a211cb70e7878dbce34a6f8dc0175647에는 값이 없고 불확실하므로 IE10 브라우저에서는 값 속성이 있으면(값이 없더라도) 도트 애니메이션의 무한 루프처럼 보입니다. , 예를 들어 1a4dfb5bbab04bc84859e9441336e85ca211cb70e7878dbce34a6f8dc0175647도 확실한 것으로 간주됩니다. 도트 애니메이션이 요정 모드로 들어갑니다.——>바가 변경됩니다

(3) 위치는 이름처럼 읽기 전용 속성입니다. 현재 진행 위치는 value/max 값입니다. 진행률 표시줄이 확실하지 않은 경우 값은 -1입니다.

(4) 레이블도 읽기 전용 속성이며, 얻은 것은 진행률 요소를 가리키는 레이블 요소입니다. 예를 들어

document

.querySelector("progress").labels는 HTMLCollection을 반환하며 다음은 내 테스트 중 하나의 스크린샷입니다(Opera 브라우저에서 가져온 것으로 현재 FireFox18.0.2 및 IE10에서는 지원하지 않는 것 같습니다). . progress 요소 호환성 처리 예시

html 코드

XML/HTML 코드 내용을 클립보드에 복사

1.<progress max="100" value="20"><ie style="width:20%;"></ie></progress>

css 호환 코드

CSS 코드 내용을 클립보드에 복사

1.progress {
2. display: inline-block;
3. width: 160px;
4. height: 20px;
5. border: 1px solid #0064B4;
6. background-color:#e6e6e6;
7. color: #0064B4; /*IE10*/
8.}
9./*ie6-ie9*/
10.progress ie {
11. display:block;
12. height: 100%;
13. background: #0064B4;
14.}
15.progress::-moz-progress-bar { background: #0064B4; }
16.progress::-webkit-progress-bar { background: #e6e6e6; }
17.progress::-webkit-progress-value { background: #0064B4; }

이 사례를 읽고 믿겠습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!