CSS JS_javascript 기술로 구현된 진행 표시줄 효과

진행률 표시줄을 통해 사용자는 웹사이트에 들어갈 때 웹페이지가 얼마나 다운로드되었는지 확인할 수 있습니다. 이로 인해 사용자의 대기 시간이 길어지고 느린 공간의 단점을 효과적으로 보완할 수 있습니다. 물론 공간이 너무 느리니 공간을 바꾸시는 걸 추천드려요 ㅎㅎ)
그럼 이제 두 가지 예를 들어보겠습니다
하나는 FLASH를 이용해서 구현한 것입니다. (인터넷의 많은 웹사이트가 이런 식이라 제가 이겼습니다. 자세한 내용은 다루지 않음)
하나는 동적 GIF를 사용하여 구현됩니다. (이 내용은 Microsoft의 공식 다운로드 페이지에서 확인할 수 있습니다. 자세한 내용은 다루지 않겠습니다.)
여기서는 CSS JS를 사용하여 이를 구현하는 데 중점을 둡니다. 효과
자, 더 이상 말도 안 되는 소리는 그만하고, 시작해 보세요
먼저 HTML 코드를 작성하세요

33%

자, 이제 CSS 코드를 작성해 봅시다
}

이것은 진행률 표시줄의 배경색을 #000으로 지정하는 것입니다. , 검정색, 테두리 추가

j
다음 단계는 loadcss를 사용하여 디자인하는 것입니다

#loadcss {

display: block ; /*very important, make 블록으로*/

background-color: # 0df;

text -align :

                                        ㅎㅎ , 그러나 이제 전체 진행률 표시줄이 가득 찼습니다

그렇다면 진행 상황을 어떻게 표시할 수 있을까요?

여기서는 영리한 방법을 사용할 수 있습니다

HTML 코드를 살짝 수정해 보세요.

다음 코드를 보세요.




                                                                  🎜>
헤헤 어때요 이제 33% 나오네요

근데 꼼짝도 안 하잖아요 그렇죠? JS를 사용하여 구현하세요. (이 JS는 제가 디자인한 것이 아닙니다.) ...)




자, 이 JS는 주로 두 가지 기능으로 구성되어 있습니다. 하나는 load 이며, 여는 데 사용됩니다. 진행률 표시줄

                                        setload는 진행률 표시줄의 위치를 ​​제어하는 ​​데 사용되며 0.5초마다 steload를 실행합니다.

이 JS는 HEAD에 배치되어야 합니다. 그런 다음 BODY, 즉

을 호출합니다. 하하 이제 웹페이지를 실행해 보세요. 하하 성공인가요?