HTML5 진행 표시줄에 대한 자세한 설명

HTML5 진행률 표시줄 자세한 설명

HTML5 진행률 요소 소개 progress는 HTML5의 새로운 요소로, 진행률 표시줄을 정의하는 의미로 다양한 용도로 사용되며 파일의 진행률을 표시하는 데 사용할 수 있습니다. 업로드 및 파일 다운로드를 위한 로딩 상태 표시줄로도 사용할 수 있습니다.

html5 진행 진행률 표시줄 구문 '70' max= '100' >

html5 진행률 표시줄의 모양을 보려면 여기를 클릭하세요.

html5 진행 속성 progress max max 속성은 진행률 표시줄의 최대 진행 값을 나타냅니다. 이 값이 있는 경우 0보다 큰 유효한 부동 소수점 숫자여야 합니다. max의 기본값은 1입니다.

progress value value 속성은 진행률 표시줄의 진행률을 나타내며 값 범위는 0에서 max 사이입니다. max 속성이 설정되지 않은 경우 value 속성의 범위는 0에서 1 사이여야 합니다.

값이 없으면 완료 진행 상황이 불확실합니다. 이때는 작업이 진행 중이라는 뜻이지만 완료까지 얼마나 걸릴지는 알 수 없다. 이때 진행 상황은 웹킷 브라우저의 로딩으로 사용될 수 있으며, 이는 페이지가 로딩 중이거나 Ajax가 백그라운드 데이터를 요청하고 있음을 나타냅니다.

위 사진은 크롬 브라우저에서 찍은 사진입니다.

값을 설정하지 않고 진행하는 것은 중간에 있는 진행 블록이 앞뒤로 돌아다니는 로딩과 같습니다.

Windows 7에서 값이 없는 진행 상황은 다음과 같습니다.

실제로는 약간 보기 흉하지만 일반적인 Windows 스타일을 상속합니다.

html5 진행 호환성 progress는 IE10+ 브라우저에서 지원됩니다

html5 진행 진행 효과 표시 진행 애니메이션 효과 시뮬레이션 코드는 다음과 같습니다.

您的浏览器不支持progress元素

function goprogress(){ var pro=document.getElementsByTagName("progress")[0]; gotoend(pro,0); } function gotoend(pro,value){ var value=value+1; pro.value=value; if(value

点击这里查看progress动画模拟。

html5 progress相关样式设置 我们以实现一个progress的自定义样式为例子，来讲述progress有哪些样式可以供我们设置。

我们要把progress改变成上面这种模样。

代码如下：

您的浏览器不支持progress元素 .mypro{ background:orange; border:1px solid red; border:2px solid #000; width:300px; height:50px; -webkit-appearance: none; } ::-ms-fill{ background:deeppink; } ::-moz-progress-bar{ background:deeppink; } ::-webkit-progress-bar{ background:orange; } ::-webkit-progress-value{ background:deeppink; } rrreee

🎜

点击这里查看progress动画模拟。 🎜

html5 진행상关样式设置 저희는 프로그레스의 자체 정의를 위해 式为例子, 来讲述progress가 있습니다.我们设置。 🎜

🎜 🎜

🎜

저희는 진행 중인 상면을 완성했습니다. 🎜🎜

代码如下： 🎜

🎜🎜

🎜🎜🎜🎜🎜🎜🎜rrreee

🎜🎜🎜🎜🎜🎜

progress에서는 너비, 높이, 테두리 등과 같은 공통 속성을 설정할 수 있습니다.

IE10+ 및 Firefox 브라우저의 경우 배경을 사용하여 진행률 표시줄의 배경색을 설정할 수 있습니다.

웹킷 브라우저의 경우 ::-webkit-progress-bar를 사용하여 진행률 표시줄의 배경색을 설정하세요.

IE10+의 경우 ::-ms-fill을 사용하여 진행률 표시줄 완료 진행 상황의 배경색을 설정합니다.

firefox의 경우 ::-moz-progress-bar를 사용하여 진행률 표시줄의 배경색을 설정하여 진행률을 완료합니다.

웹킷 브라우저의 경우 ::-webkit-progress-value를 사용하여 진행률 표시줄 완료 진행 상황의 배경색을 설정합니다.

참고: ::-webkit-progress-bar는 진행률 표시줄의 배경색을 설정하고, ::-moz-progres-bar는 진행률 표시줄의 배경색을 다음으로 설정합니다. 진행을 완료하세요. 색상이 정확히 반대입니다.

그리고 웹킷 브라우저의 경우 IOS에서는 배경색과 진행 색상이 작동할 수 있도록 -wekbit-appearance:none을 사용하여 기본 진행 스타일을 지워야 합니다.

사용자 정의 진행률 표시줄 스타일을 보려면 여기를 클릭하세요.

html5 진행 결론

upload.onprogress 이벤트 콜백의 진행 상황을 사용하면 ajax2 업로드 파일에서 파일 업로드 진행 상황을 쉽게 표시할 수 있습니다. FileReader 미리 보기 이미지에 사용되는 onprogress 이벤트의 진행률 요소를 사용하여 이미지 읽기 진행률을 표시할 수도 있습니다.

이 문서에서는 HTML5 진행률 표시줄에 대해 설명합니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트를 참고하세요.

HTML5 진행 표시줄에 대한 자세한 설명

관련 기사