HTML의 동적 진행률 표시줄

11281 단어 beginnershtmljavascript

진행률 표시줄은 무엇입니까?



Progress는 로딩, 다운로드, 진행의 시각적 상태를 보여줍니다. 일부 진행률 표시줄은 작업이 완료되는 비율을 백분율로 표시하고 그 중 일부는 작업을 완료하는 데 걸리는 시간을 보여줍니다. 단순히 작업의 진행 상태를 보여줍니다. 작업 상태를 그래픽으로 표현한 것입니다.
진행률 표시줄에는 백분율 진행률 표시줄, 다단계 진행률 표시줄, 원형 등 다양한 유형이 있습니다. 여기에서는 HTML, JavaScript 및 CSS로 간단한 다운로드 진행률 표시줄을 만들 것입니다.

HTML에서 진행률 표시줄을 만드는 방법은 무엇입니까?



HTML과 CSS를 사용하여 진행률 표시줄을 만들고 JavaScript를 사용하여 동적으로 만듭니다.
먼저 HTML 파일 ProgressBar.html 생성
10% 너비로 시작하는 다운로드 진행률 표시줄을 표시하는 div 태그 내부에 ProgressBar 클래스를 만듭니다.

<!DOCTYPE html>
<html>
  <head>   
<link rel="stylesheet" href="style.css">
    <title>Dynamic Progress Bar</title>
  </head>
  <body>
    <h1>Progress Bar</h1>
    <div class="ProgressBar" style="--width: 10" Dlabel="Downloading..."></div>
      </body>
</html>


진행률 표시줄에 스타일을 적용하고 HTML과 연결할 style.css 파일을 만듭니다.

*, *::before, *::after {
    box-sizing: border-box;
}
.ProgressBar {
    position: relative;
    width: 600px;
    height: 3em;
    background-color: black;
    border-radius: 1.5em;
    color: white;
}
/*progress styling*/
.ProgressBar::before {
    content: attr(Dlabel);
    display: flex;
    align-items: center;
    position: absolute;
    left: .5em;
    top: .5em;
    bottom: .5em;
    width: calc(var(--width, 0) * 1%);
    min-width: 2rem;
    max-width: calc(100% - 1em);
    background-color: green;
    border-radius: 1em;
    padding: 1em;
}
/*backgroud styling*/
html {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
   }


우리는 이것을 얻는다
.

HTML 진행률 표시줄을 동적으로 만드는 방법은 무엇입니까?



진행률 표시줄을 동적으로 만드는 데 도움이 되는 JavaScript를 사용합니다. 일부 JavaScript 속성은 ProgressBar를 동적으로 만듭니다.
• document.getElementsByClassName(): 클래스에서 모든 요소를 ​​가져와서 progressBar에 저장합니다.
• setInterval(): 진행률 표시줄을 종료하기 위해 지정된 5초 동안 코드를 반복적으로 실행하는 속성입니다.
• getComputedStyle(): progressBar에서 사용되는 모든 CSS 활성 스타일을 가져오고 스타일시트의 지정된 값(존재하는 경우)에 대해 계산을 수행합니다.
• getPropertyValue(): 지정된 너비 값을 모두 포함하는 너비 문자열을 반환합니다.
• style.setProperty()는 style에서 선언된 객체의 width 속성 값을 설정합니다.

<script type="text/javascript">
      const progressBar = document.getElementsByClassName('ProgressBar')[0]
setInterval(() => {
  const computedStyle = getComputedStyle(progressBar)
  const width = parseFloat(computedStyle.getPropertyValue('--width')) || 0
  progressBar.style.setProperty('--width', width + .1)
}, 5)


이것은 JavaScript를 추가한 후의 완전한 HTML 코드입니다.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
    <title>Dynamic Progress Bar</title>
  </head>
  <body>
    <h1>Progress Bar</h1>
    <div class="ProgressBar" style="--width: 8" Dlabel="Downloading..."></div>
    <script type="text/javascript">
      const progressBar = document.getElementsByClassName('ProgressBar')[0]
setInterval(() => {
  const computedStyle = getComputedStyle(progressBar)
  const width = parseFloat(computedStyle.getPropertyValue('--width')) || 0
  progressBar.style.setProperty('--width', width + .1)
}, 5)
</script>
  </body>
</html>




결론



진행률 표시줄은 작업 상태를 그래픽으로 나타냅니다. 이 문서에서는 CSS 스타일을 사용하여 HTML로 다운로드 진행률 표시줄을 만들었습니다. 진행률 표시줄을 동적으로 만들기 위해 JavaScript를 사용합니다.
selenium/python도 Azure DevOps pipeline에서 헤드리스를 실행하고 싶습니까? 맞지?
typescript를 사용하여 React에서 사용자 지정 후크를 만드는 방법은 무엇입니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage