자바스크립트에서 진행률 표시줄을 구현하는 방법

진행률 표시줄은 일반적으로 작업이나 작업의 진행 상황을 표시하는 데 사용되는 일반적인 UI 구성 요소입니다. 많은 웹 애플리케이션에서 진행률 표시줄은 사용자가 현재 작업의 진행 상황을 더 잘 이해할 수 있도록 하여 사용자 경험을 향상시키는 데 매우 필요합니다. 이 기사에서는 JavaScript를 사용하여 진행률 표시줄을 구현하는 방법을 소개합니다.

1. HTML과 CSS를 사용하여 기본 진행률 표시줄 만들기
HTML에서는 요소를 사용하여 기본 진행률 표시줄을 만들 수 있습니다. 요소에 value 속성과 max 속성을 설정하면 진행률 표시줄의 완료 정도를 확인할 수 있습니다. 예를 들어, 최대값이 100인 진행률 표시줄을 만들어야 하고 현재 완료 수준이 50이라고 가정하면 다음과 같이 작성할 수 있습니다.

<progress value="50" max="100"></progress>

다음으로 CSS 스타일을 사용하여 진행률 표시줄을 아름답게 해야 합니다. 진행률 표시줄의 진행 상황을 시뮬레이션하기 위해 요소의 배경색과 의사 요소를 설정할 수 있습니다. 예를 들어, 다음 스타일은 진행률 표시줄의 높이를 20픽셀로, 배경색을 밝은 회색으로, 진행률 색상을 짙은 녹색으로 설정할 수 있습니다.

progress {
  height: 20px;
  background-color: #f5f5f5;
}

progress::-webkit-progress-value {
  background-color: #2ecc71;
}

여기에서는 의사 요소 ::-webkit-progress-value가 사용됩니다. 진행률 표시줄의 색상을 지정합니다. 실제 응용 프로그램에서는 실제 필요에 따라 다른 스타일을 사용자 정의할 수도 있습니다.

2. JavaScript를 사용하여 진행률 표시줄 완료 제어
위 방법을 통해 기본 진행률 표시줄을 만들 수 있지만 진행률 표시줄 완료는 정적이므로 동적으로 조정할 수 없습니다. 다음으로 JavaScript를 사용하여 진행률 표시줄의 완료를 제어하겠습니다.

먼저 요소에 대한 참조를 가져와서 진행률 표시줄의 현재 값을 저장하는 전역 변수를 만들어야 합니다. 예를 들어, 진행률 표시줄의 ID가 "progressbar"라고 가정하면 다음과 같이 작성할 수 있습니다.

let progressbar = document.getElementById("progressbar");
let progress = 0;

다음으로 진행률 표시줄의 완료를 제어하는 ​​함수를 작성할 수 있습니다. 이 함수는 진행률 표시줄의 증가를 나타내는 매개변수를 받을 수 있습니다. 이 함수가 호출될 때마다 전달된 증분량에 따라 진행률 표시줄의 완료 정도가 변경되고 진행률 표시줄의 값이 업데이트됩니다. 예를 들어, 다음 코드는 진행률 표시줄의 완료 수준을 10% 높입니다.

function updateProgress(increment) {
  progress += increment;
  progressbar.value = progress;
}

이 함수를 테스트하려면 HTML에 버튼을 추가하고 해당 클릭 이벤트에서 updateProgress() 함수를 호출할 수 있습니다. 예를 들어 다음 코드는 진행률 표시줄의 완료 정도를 20% 높입니다.

<button onclick="updateProgress(20)">增加进度</button>

다음으로 진행률 표시줄의 완료 정도를 동적으로 제어하는 ​​로직을 추가할 수 있습니다. 예를 들어, 진행률 표시줄의 완료를 주기적으로 자동으로 늘리는 타이머를 작성할 수 있습니다. 예를 들어 다음 코드는 진행률 표시줄의 완료 정도를 1초마다 5%씩 증가시킵니다.

setInterval(function() {
  updateProgress(5);
}, 1000);

3. AJAX 요청과 결합하여 진행률 표시줄을 업데이트합니다.
실제 시나리오에서 진행률 표시줄은 일반적으로 진행률 표시줄을 표시하는 데 사용됩니다. 비동기 작업의 진행 상황. 예를 들어 파일을 업로드하고 서버에 데이터를 보내는 등의 작업에는 일정 시간이 걸리며 사용자에게 현재 진행 상황을 알려주기 위해 진행률 표시줄이 표시되어야 합니다. 이러한 경우 AJAX 요청을 결합하여 진행률 표시줄을 업데이트해야 합니다.

파일 업로드를 예로 들면 AJAX 요청을 통해 파일을 업로드하고 업로드 진행률을 updateProgress() 함수에 매개변수로 전달할 수 있습니다. 예를 들어, 다음 코드는 파일을 업로드하기 위한 AJAX 요청을 생성합니다.

function uploadFile(file) {
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "/upload");
  xhr.upload.addEventListener("progress", function(event) {
    let percent = (event.loaded / event.total) * 100;
    updateProgress(percent);
  });
  xhr.send(file);
}

이 메서드에서는 XMLHttpRequest 객체를 통해 POST 요청을 생성하고 파일을 매개변수로 전달합니다. 요청 프로세스 중에 업로드 진행 상황을 모니터링하기 위해 진행 이벤트 리스너를 추가하고 진행률을 updateProgress() 함수에 매개변수로 전달하여 진행률 표시줄을 업데이트했습니다.

위의 방법과 결합하면 비동기 작업의 진행 상황에 따라 진행률 표시줄을 동적으로 업데이트하여 더 나은 사용자 경험을 달성할 수 있습니다.

요약:
이 글에서는 JavaScript를 사용하여 진행률 표시줄을 구현하는 방법을 소개합니다. 먼저 HTML과 CSS를 사용하여 기본 진행률 표시줄을 만들 수 있습니다. 그런 다음 JavaScript를 사용하여 진행률 표시줄의 완료를 동적으로 제어할 수 있습니다. 마지막으로 AJAX 요청을 결합하여 진행률 표시줄을 업데이트하여 더 나은 사용자 경험을 제공합니다. 위의 방법은 사용자가 작업 진행 상황을 더 잘 이해하고 사용자 경험을 향상시키는 데 도움이 되는 많은 웹 애플리케이션에서 사용될 수 있습니다.

위 내용은 자바스크립트에서 진행률 표시줄을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!