HTML, CSS 및 JavaScript를 사용하여 반응형 진행률 표시줄을 디자인하는 방법

위의 코드 조각에서 아래에 제공된 방법론을 적용합니다.

• 제목을 만들고 두 개의 '
  ” 요소를 사용하여 진행률 표시줄을 누적합니다.
• 또한 “
  ” 진행률 표시줄을 단계별로 진행하는 옵션으로 구성된 요소입니다.
  • 마지막으로 각각 뒤로 이동하거나 다음 단계로 이동하는 두 개의 버튼을 만듭니다.

  CSS 코드

  
  
  

  이제 다음 CSS 코드 블록의 개요를 살펴보겠습니다.

  < 스타일 유형 = '텍스트/CSS' >
  #진전 {
  위치: 상대;
  여백 하단: 30px;
  }
  #진행1 {
  위치: 절대;
  배경: 녹색;
  높이: 5px;
  너비: 0 % ;
  맨 위: 오십 % ;
  왼쪽: 0 ;
  }
  #진행2 {
  여유: 0 ;
  심: 0 ;
  목록 스타일: 없음;
  표시하다: 몸을 풀다 ;
  내용 정당화: 공백 사이;
  }
  #progress2::이전 {
  콘텐츠: '' ;
  배경색: 밝은 회색;
  위치: 절대;
  맨 위: 오십 % ;
  왼쪽: 0 ;
  높이: 5px;
  너비: 100 % ;
  Z-색인: -1 ;
  }
  #progress2.단계 {
  테두리: 3px 단색 밝은 회색;
  국경 반경: 100 % ;
  너비: 25px;
  높이: 25px;
  줄 높이: 25px;
  텍스트 정렬: 중앙;
  배경색: #fff;
  글꼴 모음: 산세리프;
  글꼴 크기: 14px;
  위치: 상대;
  Z-색인: 1 ;
  }
  #progress2.step.active {
  테두리 색상: 녹색;
  배경색: 녹색;
  색상: #fff;
  }
  스타일 >

  이 코드에서는:

  • 진행률 표시줄의 상대적 위치와 기본 하위 요소의 절대 위치를 조정합니다.
  • 또한 다음 단계로 전환하기 전에는 기본 색상으로 구성되고 다음 단계로 진행하면 다른 색상으로 전환되도록 진행률 표시줄의 스타일을 지정합니다.
  • 이는 다음과 같은 스타일을 통해 달성됩니다. 배경색 ” 등 원 내의 비활성 및 활성 단계 각각.

  자바스크립트 코드

  마지막으로 아래 제공된 코드 블록에 주의하세요.

  < 스크립트 유형 = '텍스트/자바스크립트' >
  허락하다 xBar = document.getElementById ( '진행1' ) ;
  허락하다 xNext = document.getElementById ( '진행다음' ) ;
  허락하다 xPrev = document.getElementById ( '진행중' ) ;
  허락하다 단계 = document.querySelectorAll ( '.단계' ) ;
  허락하다 활성 = 1 ;
  xNext.addEventListener ( '딸깍 하는 소리' , ( ) = < {
  활성++;
  만약에 ( 활동적인 < 걸음수.길이 ) {
  활성 = 단계.길이;
  }
  응답 진행률 ( ) ;
  } ) ;
  xPrev.addEventListener ( '딸깍 하는 소리' , ( ) = < {
  활동적인--;
  만약에 ( 활동적인 > 1 ) {
  활성 = 1 ;
  }
  응답 진행률 ( ) ;
  } ) ;
  const 반응진행 = ( ) = < {
  단계.forEach ( ( 단계, 나 ) = < {
  만약에 ( 나 > 활동적인 ) {
  단계.classList.추가 ( '활동적인' ) ;
  } 또 다른 {
  단계.classList.제거 ( '활동적인' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( 활동적인 - 1 ) / ( 걸음수.길이 - 1 ) ) * 100 + '%' ;
  만약에 ( 활동적 === 1 ) {
  xPrev.disabled = 진실 ;
  } 또 다른 만약에 ( 활성 === 단계.길이 ) {
  xNext.disabled = 진실 ;
  } 또 다른 {
  xPrev.disabled = 거짓 ;
  xNext.disabled = 거짓 ;
  }
  } ;
  스크립트 >

  다음 코드 줄에서:

  • 우선, 진행률 표시줄을 호출하고 '를 통해 이전 및 다음 버튼을 호출합니다. 아이디 '를 사용하여 ' getElementById() ' 방법.
  • 그 후 “ 추가이벤트리스너() ' 트리거된 ' 딸깍 하는 소리 ” 이벤트가 발생하면 활성 단계는 “를 통해 단계가 완료될 때까지 이동됩니다. 길이 ' 재산.
  • 마찬가지로 단계를 다시 탐색합니다.
  • 또한 ' 반응진행() '는 각 단계를 반복하고 'if/else' 문을 통해 활성 클래스를 전환하는 함수입니다.
  • 이제 활성 단계와 전체/모든 단계에 대한 진행률 표시줄의 너비를 백분율로 지정합니다.
  • 마지막으로, 활성 단계가 첫 번째 또는 마지막 단계인 경우 해당 버튼을 비활성화합니다.

  메모: 이 경우 전체 코드는 '에 대한 전용 태그와 함께 동일한 HTML 파일에 포함됩니다. CSS ' 그리고 ' 자바스크립트 ” 코드. 그러나 별도의 파일을 연결할 수도 있습니다.

  산출

  

  결론

  반응형 단계 진행률 표시줄은 큰 양식이 여러 단계로 분할될 때 적용되며 HTML, CSS 및 JavaScript를 사용하여 디자인할 수 있습니다. 이 진행률 표시줄은 요구 사항에 따라 추가로 사용자 정의할 수도 있습니다(예: 단계 추가 또는 제거 등). 이 글에서는 HTML, CSS 및 JavaScript를 사용하여 반응형 표시줄을 디자인하는 방법을 자세히 설명했습니다.