HTML5는 자체 진행률 표시줄과 슬라이더 효과를 구현합니다.

 <div id=d> <p id=pgv>진행률: %</p> <progress id=pg max= value=></progress> </div>

진행률 태그를 사용하여 최소값과 최대값을 설정하세요. value를 사용하여 진행률 값을 얻을 수 있습니다.

 function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var 타이머 = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = '진행률:' + pg.value + '%' } else { pgv.innerHTML = '로드 완료' ClearInterval(타이머) } }, ) }

최종 효과는 다음과 같습니다.

이 표시 효과는 Chrome 브라우저용이며 IE와 FireFox는 스타일이 다릅니다!

스타일 변경:

 Progress{ -webkit-appearance: none; } ::-webkit-progress-bar{ /* 진행률 가져오기 */ background-color: orange /* 진행률 표시줄의 채워지지 않은 배경색*/ } ::-webkit-progress; -value { background-color: rgb(, , ); /* 진행률 표시줄의 채워진 부분의 배경색*/ } ::-webkit-progress-inner-element { border: px solid black; 진행률 표시줄의 내부 테두리입니다. 윤곽선과 구별되도록 주의하세요*/ }

여기에 있는 스타일은 모두 웹킷 커널용이며 다른 스타일은 지원되지 않습니다 ~~~ 효과는 다음과 같습니다.

입력 유형을 범위로 설정합니다. 그러나 모든 브라우저가 이 속성을 지원하는 것은 아닙니다. 그렇지 않은 경우 기본 속성인 <input type=text>가 반환됩니다.

(자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range를 참조하세요)

기본 스타일:

 <div id=d> <p>H 드래그 가능한 슬라이더:</p> <input type=range name=points min= max= id=hpro/> </div>

1. 다음과 같은 속성이 제공됩니다.

 (1), defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

기본값 = (최대값 설정 < 최소값 설정)? 최소값 설정 : 최소값 설정 + (최대값 설정 - 최소값 설정) / 2 ---- 실제로는 중간값을 취함

value=7로 슬라이더 값을 설정할 수 있습니다.

(2), <input type=range min=-10 max=10>

min: 최소값을 설정합니다. max: 최대값을 설정합니다.

(3), <input type=range min=5 max=10 step=0.01>

step: 단계 값을 설정합니다. 기본값은 1입니다. min 또는 max가 소수점으로 설정된 경우(예: max=3.14) 소수점을 얻을 수 없으면 step을 step=any로 설정할 수 있습니다.

(4), 해시 마크 및 라벨:

참고: 현재 해시 표시와 라벨이라는 두 가지 속성을 완벽하게 지원하는 브라우저는 없습니다. 예를 들어 Firefox는 두 가지 속성을 모두 지원하지 않으며 Chrome은 해시 표시를 지원하지만 라벨은 지원하지 않습니다.

a) 해시 마크:

 <입력 유형=범위 이름=포인트 min= max= 단계=모든 id=hpro 목록=tickmarks/> <데이터 목록 id=tickmarks> <옵션 값=> <옵션 값=> <옵션 값=> <옵션 값=> < 옵션 값=> <옵션 값=> <옵션 값=> <옵션 값=> <옵션 값=> <옵션 값=> <옵션 값=> </datalist>

b) 라벨:

 <입력 유형=범위 이름=포인트 min= max= 단계=모든 id=hpro 목록=tickmarks/> <데이터 목록 id=tickmarks> <옵션 값= 라벨=%> <옵션 값=> <옵션 값=> <옵션 값 => <옵션 값=> <옵션 값=레이블=%> <옵션 값=> <옵션 값=> <옵션 값=> <옵션 값=> <옵션 값=레이블=%> </datalist>

(5) 자동 초점은 슬라이더가 자동으로 초점을 맞추는지 여부를 설정하거나 되돌릴 수 있습니다. true로 설정한 후 웹 페이지에 들어갈 때 슬라이더가 자동으로 잠기게 되며 키보드의 위, 아래, 왼쪽, 오른쪽을 눌러 제어할 수 있습니다. .

2. 외모 미화:

 input[type=range] { 개요: 없음; -webkit-appearance: none; /* IOS에서 기본 스타일을 제거하는 데 자주 사용되는 시스템 기본 모양 스타일을 제거합니다*/ border-radius: px }

-webkit-appearance: 없음 기본 스타일 제거;

 입력[유형=범위]::-webkit-slider-runnable-track { 높이: px; 테두리 반경: px; 상자 그림자: px px #deff, inset .em .em #d;

::-webkit-slider-runnable-track은 CSS 의사 클래스 요소이며 모든 브라우저에서 지원되지는 않습니다. <input type=range> 의 트랙을 얻을 수 있습니다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track을 참조하세요.

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* 슬라이더의 기본 스타일 제거*/ height: px; margin-top: -px; # BE; 테두리 반경: %; 테두리: 솔리드 .em rgba(, , , .);

::-webkit-slider-thumb은 <input type=range> 의 트랙을 얻을 수 있습니다.

위 내용은 편집자가 자체 진행률 표시줄과 슬라이더 효과를 포함하여 소개한 HTML5 구현입니다. 질문이 있는 경우 메시지를 남겨주시면 편집자가 제 시간에 답변해 드릴 것입니다. . 또한 VeVb 무술 웹사이트를 지원해 주신 모든 분들께 감사드립니다!