>  기사  >  웹 프론트엔드  >  html5에서 간단한 진행률 표시줄 효과를 구현하는 방법은 무엇입니까? 동적 진행률 표시줄 구현(코드 예)

html5에서 간단한 진행률 표시줄 효과를 구현하는 방법은 무엇입니까? 동적 진행률 표시줄 구현(코드 예)

青灯夜游
青灯夜游원래의
2018-10-30 18:14:1119899검색

웹사이트를 탐색할 때 페이지 로딩이 자주 발생합니다. 이때 페이지에 동적 진행률 표시줄이 나타나 로딩이 완료될 때까지 계속 스크롤됩니다. 그렇다면 이러한 동적 진행률 표시줄은 어떻게 구현됩니까? 이 기사에서는 HTML5에서 간단한 동적 진행률 표시줄 효과를 구현하는 방법을 소개하고, 페이지에 동적 진행률 표시줄을 스크롤하여 로드하는 코드를 공유하여 관심 있는 친구들이 참고할 수 있기를 바랍니다. 너.

먼저 간단한 동적 진행률 표시줄 효과를 구현하는 HTML5의 원리를 이해해 보겠습니다.

강력한 HTML5는 새로운 태그 를 제공합니다. 이 태그는 정적 진행률 표시줄 효과(아래 참조)를 달성한 다음 간단한 js 코드를 추가하여 다음을 달성할 수 있습니다. 진행률 표시줄 스크롤 효과.

html5에서 간단한 진행률 표시줄 효과를 구현하는 방법은 무엇입니까? 동적 진행률 표시줄 구현(코드 예)

아래에서는 간단한 코드 예제를 사용하여 HTML5에서 동적 진행률 표시줄을 구현하는 방법을 소개합니다.

html5 코드:

<progress max="100" value="0" id="pg"></progress>

태그의 사용은 매우 간단하고 의미가 매우 명확하며 위의 두 가지 속성만 있습니다. 완료해야 할 작업의 양, 가치 지금까지 완료한 작업의 양입니다(스타일은 위 그림 참조).

js 코드:

var pg=document.getElementById(&#39;pg&#39;); 
setInterval(function(e){
   if(pg.value!=100) pg.value++;      
   else pg.value=0;
},100);

Rendering:

html5에서 간단한 진행률 표시줄 효과를 구현하는 방법은 무엇입니까? 동적 진행률 표시줄 구현(코드 예)

위 구현 이 방법은 더 간단하고 의미론적일 뿐만 아니라 코드를 크게 단순화하고 더 유연하게 만들기 때문에 HTML5를 능숙하게 사용하는 것이 매우 필요합니다!

그러나 html5 태그의 브라우저 지원도 고려해야 할 문제입니다. 태그의 브라우저 지원을 살펴보겠습니다.

html5에서 간단한 진행률 표시줄 효과를 구현하는 방법은 무엇입니까? 동적 진행률 표시줄 구현(코드 예)

요약: 위 글에서 소개한 html5+js의 간단한 진행바 효과 구현 방법은 직접 해보셔도 됩니다. 모든 분들의 공부에 도움이 되기를 바랍니다.

위 내용은 html5에서 간단한 진행률 표시줄 효과를 구현하는 방법은 무엇입니까? 동적 진행률 표시줄 구현(코드 예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.