Cách thiết kế thanh tiến trình đáp ứng bằng HTML, CSS và JavaScript

Trong đoạn mã trên, hãy áp dụng các phương pháp được đưa ra dưới đây:

• Tạo một tiêu đề và bao gồm hai “
  ” các phần tử để tích lũy thanh tiến trình.
• Ngoài ra, hãy bao gồm “
  ” phần tử bao gồm các tùy chọn để duyệt qua thanh tiến trình với phần tử đầu tiên đang hoạt động.
  • Cuối cùng, tạo hai nút để quay lại hoặc chuyển sang bước tiếp theo.

  Mã CSS

  
  
  

  Bây giờ là tổng quan về khối mã CSS sau:

  < phong cách kiểu = 'văn bản/css' >
  #tiến triển {
  vị trí: tương đối;
  lề dưới: 30px;
  }
  #progress1 {
  vị trí: tuyệt đối;
  nền: màu xanh lá cây;
  chiều cao: 5px;
  chiều rộng: 0 % ;
  đứng đầu: năm mươi % ;
  bên trái: 0 ;
  }
  #progress2 {
  lề: 0 ;
  phần đệm: 0 ;
  kiểu danh sách: không có;
  trưng bày: uốn cong ;
  biện minh-nội dung: khoảng cách giữa;
  }
  #progress2::trước {
  nội dung: '' ;
  màu nền: xám nhạt;
  vị trí: tuyệt đối;
  đứng đầu: năm mươi % ;
  bên trái: 0 ;
  chiều cao: 5px;
  chiều rộng: 100 % ;
  chỉ số z: -1 ;
  }
  #progress2 .step {
  đường viền: màu xám nhạt 3px;
  bán kính đường viền: 100 % ;
  chiều rộng: 25px;
  chiều cao: 25px;
  chiều cao dòng: 25px;
  căn chỉnh văn bản: giữa;
  màu nền: #fff;
  Họ phông chữ: sans-serif;
  cỡ chữ: 14px;
  vị trí: tương đối;
  chỉ số z: 1 ;
  }
  #progress2 .step.active {
  màu viền: xanh lá cây;
  màu nền: xanh lá cây;
  màu sắc: #fff;
  }
  phong cách >

  Trong mã này:

  • Điều chỉnh vị trí tương đối của thanh tiến trình và vị trí tuyệt đối của các phần tử con bên dưới.
  • Ngoài ra, hãy tạo kiểu cho thanh tiến trình sao cho trước khi chuyển sang bước tiếp theo, nó bao gồm một màu mặc định và chuyển sang màu khác khi tiếp tục sang bước tiếp theo.
  • Điều này đạt được thông qua kiểu dáng, tức là “ màu nền ” v.v. từng bước không hoạt động và hoạt động trong vòng tròn.

  Mã JavaScript

  Cuối cùng, hãy chú ý đến khối mã được cung cấp bên dưới:

  < kịch bản kiểu = 'văn bản/javascript' >
  cho phép xBar = document.getElementById ( 'tiến bộ1' ) ;
  cho phép xNext = document.getElementById ( 'tiến bộ tiếp theo' ) ;
  cho phép xPrev = document.getElementById ( 'tiến bộ' ) ;
  cho phép các bước = document.querySelectorAll ( '.bước chân' ) ;
  cho phép hoạt động = 1 ;
  xNext.addEventListener ( 'nhấp chuột' , ( ) = < {
  hoạt động++;
  nếu như ( tích cực < bước.length ) {
  hoạt động = bước.length;
  }
  đáp ứngTiến trình ( ) ;
  } ) ;
  xPrev.addEventListener ( 'nhấp chuột' , ( ) = < {
  tích cực--;
  nếu như ( tích cực > 1 ) {
  hoạt động = 1 ;
  }
  đáp ứngTiến trình ( ) ;
  } ) ;
  const responsiveProgress = ( ) = < {
  bước.forEach ( ( bước, tôi ) = < {
  nếu như ( Tôi > tích cực ) {
  bước.classList.add ( 'tích cực' ) ;
  } khác {
  step.classList.remove ( 'tích cực' ) ;
  }
  } ) ;
  xBar.style.width =
  ( ( tích cực - 1 ) / ( bước.length - 1 ) ) * 100 + '%' ;
  nếu như ( đang hoạt động === 1 ) {
  xPrev.disabled = ĐÚNG VẬY ;
  } khác nếu như ( hoạt động === bước.length ) {
  xNext.disabled = ĐÚNG VẬY ;
  } khác {
  xPrev.disabled = SAI ;
  xNext.disabled = SAI ;
  }
  } ;
  kịch bản >

  Trong các dòng mã này:

  • Trước hết, hãy gọi thanh tiến trình cũng như các nút trước và tiếp theo thông qua “ id ' sử dụng ' getElementById() ' phương pháp.
  • Sau đó, áp dụng “ addEventListener() ” phương pháp sao cho khi được kích hoạt “ nhấp chuột ” sự kiện, các bước hoạt động sẽ được duyệt qua cho đến khi các bước đó được hoàn thành thông qua “ chiều dài ' tài sản.
  • Tương tự như vậy, quay lại các bước.
  • Ngoài ra, hãy gọi “ đáp ứngProgress() ” lặp qua từng bước và chuyển đổi lớp đang hoạt động thông qua câu lệnh “if/else”.
  • Bây giờ, chỉ định chiều rộng của thanh tiến trình dưới dạng phần trăm đối với các bước đang hoạt động và tổng/tất cả các bước.
  • Cuối cùng, tắt nút tương ứng nếu bước hoạt động là bước đầu tiên hoặc cuối cùng.

  Ghi chú: Trong trường hợp này, toàn bộ mã được chứa trong cùng một tệp HTML với các thẻ dành riêng cho “ CSS ' Và ' JavaScript ” mã. Tuy nhiên, các tập tin riêng biệt cũng có thể được liên kết.

  đầu ra

  

  Phần kết luận

  Thanh tiến trình bước đáp ứng có hiệu lực khi một biểu mẫu lớn được chia thành nhiều bước và có thể được thiết kế bằng HTML, CSS và JavaScript. Thanh tiến trình này cũng có thể được tùy chỉnh thêm theo yêu cầu, tức là thêm hoặc xóa các bước, v.v. Trong bài viết này, chúng tôi đã trình bày chi tiết về cách thiết kế các thanh phản hồi bằng cách sử dụng HTML, CSS và JavaScript.