js에서 웹 페이지 진행률 표시줄 인스턴스 메소드 작성

이 글은 주로 js를 사용하여 웹 페이지 진행률 표시줄을 작성하는 효과를 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

1. 기본 아이디어

우리가 작성하는 웹 페이지 진행률 표시줄이 기존 요구 사항을 충족하고 충분히 가벼워지도록 하려면 기본 js를 사용하여 생성자를 작성합니다. 기능 이름을 " 로드 중"으로 지정합니다. 이 함수는 arr과 callback이라는 두 개의 매개변수를 받습니다. Arr은 이미지 배열을 정의하고, callback은 실행이 완료된 후 콜백 함수를 정의합니다. 생성자 내에서 이미지 배열을 탐색하여 이미지를 로드한 후 모든 로드가 완료될 때까지 진행률 표시줄이 수정되며 진행률은 100%입니다.

2. 구현 단계

(1) 먼저 진행률 표시줄을 만들고 html과 css를 작성합니다.

작성 후 진행률 표시줄 효과 미리보기

(2) Loading 생성자를 작성합니다. 이 생성자에서는 진행률 표시줄 init 메서드가 실행될 때 진행률 표시줄의 CSS와 html이 동적으로 추가되고 렌더링됩니다. 이 시점에서 진행률 표시줄 모듈이 작성되었습니다. 이를 사용할 때 생성자를 도입하고 객체를 인스턴스화하기만 하면 됩니다.

(3) 진행률 표시줄 개체 인스턴스화

3. 개선

이 구성 요소의 확장성은 주로 진행률 표시줄 스타일에서 약간 약하며 다른 진행률 표시줄에 따라 사용자 정의할 수 있습니다. 인스턴스 진행률 표시줄 스타일을 정의합니다. 따라서 생성자에 this.setCss 메서드를 추가하여 다양한 진행률 표시줄 인스턴스를 개인화할 수 있습니다. 다음과 같이 수정하세요.

진행 막대 색상이 빨간색이고 기본 #01ffff가 아닌 경우 초기화 전에 setCss 메서드를 호출하세요.

페이지 효과는 다음과 같습니다

IV. Summary

진행률 표시줄 플러그인이 개발되었으며 아직 최적화할 수 있는 부분이 많습니다. 로딩 진행률 표시줄을 더욱 우아하게 만들고 스타일을 더욱 간결하게, 코드 가독성 등을 구성할 수 있습니다. 최적화에는 끝이 없으며 학생들은 여전히 ​​열심히 노력해야 합니다.

관련 권장 사항:

h5 타이머를 사용하여 진행률 표시줄 기능을 구현하는 방법

타이머를 기반으로 진행률 표시줄 기능을 구현하는 자바스크립트의 예

에 따라 변경되는 CSS 진행률 표시줄 텍스트를 구현하는 방법 발전을 위해

위 내용은 js에서 웹 페이지 진행률 표시줄 인스턴스 메소드 작성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!