Jak zaprojektować responsywne paski postępu przy użyciu HTML, CSS i JavaScript

W powyższym fragmencie kodu zastosuj podane poniżej metodologie:

• Utwórz nagłówek i dołącz dwa „
  ” elementy gromadzące pasek postępu.
• Uwzględnij także „
  ” zawierający opcje przechodzenia przez pasek postępu, przy aktywnym pierwszym z nich.
  • Na koniec utwórz dwa przyciski, aby odpowiednio cofnąć się lub przejść do następnego kroku.

  Kod CSS

  
  
  

  A teraz przegląd następującego bloku kodu CSS:

  < styl typ = „tekst/css” >
  #postęp {
  pozycja: względna;
  margines na dole: 30px;
  }
  #postęp1 {
  pozycja: absolutna;
  tło: zielone;
  wysokość: 5px;
  szerokość: 0 % ;
  szczyt: pięćdziesiąt % ;
  lewy: 0 ;
  }
  #postęp2 {
  margines: 0 ;
  wyściółka: 0 ;
  styl listy: brak;
  wyświetlacz: przewód ;
  justify-content: odstęp pomiędzy;
  }
  #postęp2::przed {
  treść: „” ;
  kolor tła: jasnoszary;
  pozycja: absolutna;
  szczyt: pięćdziesiąt % ;
  lewy: 0 ;
  wysokość: 5px;
  szerokość: 100 % ;
  indeks Z: -1 ;
  }
  #postęp2.krok {
  obramowanie: 3 piksele w kolorze jasnoszarym;
  promień granicy: 100 % ;
  szerokość: 25px;
  wysokość: 25px;
  wysokość linii: 25px;
  wyrównanie tekstu: do środka;
  kolor tła: #ffff;
  rodzina czcionek: bezszeryfowa;
  rozmiar czcionki: 14px;
  pozycja: względna;
  indeks Z: 1 ;
  }
  #progress2 .step.active {
  kolor obramowania: zielony;
  kolor tła: zielony;
  kolor: #ffff;
  }
  styl >

  W tym kodzie:

  • Dostosuj względną pozycję paska postępu i pozycję bezwzględną podstawowych elementów podrzędnych.
  • Zmień także styl paska postępu tak, aby przed przejściem do następnego kroku miał domyślny kolor i zmieniał się na inny kolor po przejściu do następnego kroku.
  • Osiąga się to poprzez stylizację, tj. „ kolor tła ” itd. każdy z nieaktywnych i aktywnych kroków w okręgu.

  Kod JavaScript

  Na koniec zwróć uwagę na poniższy blok kodu:

  < scenariusz typ = „tekst/javascript” >
  pozwalać xBar = dokument.getElementById ( „postęp1” ) ;
  pozwalać xNext = dokument.getElementById ( „postęp następny” ) ;
  pozwalać xPrev = document.getElementById ( „postęp” ) ;
  pozwalać kroki = document.querySelectorAll ( '.krok' ) ;
  pozwalać aktywny = 1 ;
  xNext.addEventListener ( 'Kliknij' , ( ) = < {
  aktywny++;
  Jeśli ( aktywny < długość.kroków ) {
  aktywny = długość kroków;
  }
  responsywny postęp ( ) ;
  } ) ;
  xPrev.addEventListener ( 'Kliknij' , ( ) = < {
  aktywny--;
  Jeśli ( aktywny > 1 ) {
  aktywny = 1 ;
  }
  responsywny postęp ( ) ;
  } ) ;
  const responsywnyProgres = ( ) = < {
  kroki.dla każdego ( ( krok, tj ) = < {
  Jeśli ( I > aktywny ) {
  krok.classList.add ( 'aktywny' ) ;
  } w przeciwnym razie {
  krok.lista_klas.usuń ( 'aktywny' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( aktywny - 1 ) / ( kroki.długość - 1 ) ) * 100 + „%” ;
  Jeśli ( aktywny === 1 ) {
  xPoprzedni.wyłączony = PRAWDA ;
  } w przeciwnym razie Jeśli ( aktywny === długość kroków ) {
  xNext.disabled = PRAWDA ;
  } w przeciwnym razie {
  xPoprzedni.wyłączony = FAŁSZ ;
  xNext.disabled = FAŁSZ ;
  }
  } ;
  scenariusz >

  W tych liniach kodu:

  • Przede wszystkim wywołaj pasek postępu oraz przyciski Poprzedni i Następny za pomocą ich „ identyfikatory ' używając ' getElementById() ' metoda.
  • Następnie zastosuj „ dodajEventListener() ” metoda taka, że ​​po wyzwoleniu „ Kliknij ”, aktywne kroki są przenoszone aż do ich zakończenia za pomocą przycisku „ długość ' nieruchomość.
  • Podobnie, przejdź z powrotem po schodach.
  • Wywołaj także opcję „ responsywnyPostęp() ”, która przechodzi przez każdy z kroków i przełącza aktywną klasę za pomocą instrukcji „if/else”.
  • Teraz przypisz szerokość paska postępu jako procent w odniesieniu do aktywnych i całkowitych/wszystkich kroków.
  • Na koniec wyłącz odpowiedni przycisk, jeśli aktywny krok jest pierwszym lub ostatnim.

  Notatka: W tym przypadku cały kod zawarty jest w tym samym pliku HTML z dedykowanymi tagami dla „ CSS ' I ' JavaScript kody. Można jednak łączyć także osobne pliki.

  Wyjście

  

  Wniosek

  Responsywny pasek postępu kroku zaczyna działać, gdy duży formularz jest podzielony na wiele kroków i można go zaprojektować przy użyciu HTML, CSS i JavaScript. Ten pasek postępu można również dodatkowo dostosować zgodnie z wymaganiami, np. dodając lub usuwając kroki itp. W tym artykule omówiliśmy projektowanie responsywnych pasków przy użyciu HTML, CSS i JavaScript.