HTML5 진행 표시줄의 진행 요소에 대한 자세한 설명과 호환성 처리를 위한 샘플 코드

HTML5진행률 태그를 사용하여 페이지에 진행률 표시줄을 직접 추가할 수 있습니다. 이는 매우 흥미롭지만 여기에서는 각 브라우저의 기본 표시 효과가 다릅니다. HTML5의 프로그레스 바 프로그레스 요소 살펴보기 소개 및 호환성 처리

1. 프로그레스 요소의 기본 이해
1. >
progress 요소 HTML5 계열에 속하며 진행률 표시줄을 나타냅니다. IE10+ 및 기타 안정적인 브라우저에서 지원됩니다. 다음은 간단한 코드입니다.

<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 속성의 유무에 따라 진행 진행률 표시줄이 결정적인지 여부가 결정됩니다. 무슨 뜻인가요? 예를 들어, 에는 값이 없고 불확실하므로 IE10 브라우저에서는 값 속성이 있으면(값이 없더라도) 도트 애니메이션의 무한 루프처럼 보입니다. , 등도 확인된 것으로 간주되며 가상 포인트 애니메이션이 페어리 모드로 전환됩니다. ——> 아래 스크린샷과 같이 막대가 변경됩니다.


(3) position 이름에서 알 수 있듯이 현재 진행 위치는 value / max 값입니다. 진행률 표시줄이 불확실한 경우 값은 -1입니다.

(4) 레이블도 읽기 전용 속성이며 가져오는 것은 진행률 요소를 가리키는 레이블 요소입니다. 예를 들어 document.querySelector("progress").labels는 HTMLCollection을 반환하고 다음은 내 테스트 중 하나의 스크린샷입니다(Opera 브라우저에서 가져온 것으로 현재 FireFox18.0.2 및 IE10에서는 지원하지 않는 것 같습니다).

2. Progress 요소 호환성 처리 예시

html 코드

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

css 호환성 코드

progress {   
    display: inline-block;   
    width: 160px;   
    height: 20px;   
    border: 1px solid #0064B4;     
    background-color:#e6e6e6;   
    color: #0064B4; /*IE10*/
}   
/*ie6-ie9*/
progress ie {   
    display:block;   
    height: 100%;   
    background: #0064B4;   
}   
progress::-moz-progress-bar { background: #0064B4; }   
progress::-webkit-progress-bar { background: #e6e6e6; }   
progress::-webkit-progress-value  { background: #0064B4; }

는 브라우징 기기 차이 문제를 기본적으로 완벽하게 해결합니다. .

위 내용은 HTML5 진행 표시줄의 진행 요소에 대한 자세한 설명과 호환성 처리를 위한 샘플 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!