วิธีการออกแบบแถบความคืบหน้าแบบตอบสนองโดยใช้ HTML, CSS และ JavaScript

ในข้อมูลโค้ดข้างต้น ให้ใช้วิธีการที่กำหนดด้านล่าง:

• สร้างหัวข้อและรวมสอง “
  ” องค์ประกอบเพื่อสะสมแถบความคืบหน้า
• นอกจากนี้ ให้หมายความรวมถึง “
  ” ที่ประกอบด้วยตัวเลือกในการก้าวผ่านแถบความคืบหน้าโดยที่อันแรกใช้งานอยู่
  • สุดท้าย สร้างปุ่มสองปุ่มเพื่อย้อนกลับหรือนำทางไปยังขั้นตอนถัดไปตามลำดับ

  รหัสซีเอสเอส

  
  
  

  ตอนนี้ ภาพรวมของบล็อกโค้ด CSS ต่อไปนี้:

  < สไตล์ พิมพ์ = 'ข้อความ/ซีเอส' >
  #ความคืบหน้า {
  ตำแหน่ง: ญาติ;
  ขอบล่าง: 30px;
  }
  #ความคืบหน้า1 {
  ตำแหน่ง: แน่นอน;
  พื้นหลัง: สีเขียว;
  ความสูง: 5px;
  ความกว้าง: 0 % ;
  สูงสุด: ห้าสิบ % ;
  ซ้าย: 0 ;
  }
  #ความคืบหน้า2 {
  ระยะขอบ: 0 ;
  การขยายความ: 0 ;
  รายการสไตล์: ไม่มี;
  แสดง: ดิ้น ;
  ปรับเนื้อหา: ช่องว่างระหว่าง;
  }
  #progress2::ก่อน {
  เนื้อหา: '' ;
  สีพื้นหลัง: สีเทาอ่อน;
  ตำแหน่ง: แน่นอน;
  สูงสุด: ห้าสิบ % ;
  ซ้าย: 0 ;
  ความสูง: 5px;
  ความกว้าง: 100 % ;
  ดัชนี z: -1 ;
  }
  #progress2 .ขั้นตอน {
  เส้นขอบ: 3px สีเทาอ่อนทึบ;
  รัศมีชายแดน: 100 % ;
  ความกว้าง: 25px;
  ความสูง: 25px;
  ความสูงของบรรทัด: 25px;
  การจัดแนวข้อความ: กึ่งกลาง;
  สีพื้นหลัง: #ffff;
  ตระกูลฟอนต์: sans-serif;
  ขนาดตัวอักษร: 14px;
  ตำแหน่ง: ญาติ;
  ดัชนี z: 1 ;
  }
  #progress2 .step.active {
  ขอบสี: สีเขียว;
  สีพื้นหลัง: สีเขียว;
  สี: #ffff;
  }
  สไตล์ >

  ในรหัสนี้:

  • ปรับตำแหน่งสัมพัทธ์ของแถบความคืบหน้าและตำแหน่งสัมบูรณ์ขององค์ประกอบลูกที่อยู่ด้านล่าง
  • นอกจากนี้ ให้จัดสไตล์แถบความคืบหน้าโดยก่อนที่จะสลับไปยังขั้นตอนถัดไป แถบจะประกอบด้วยสีเริ่มต้นและการเปลี่ยนเป็นสีอื่นเมื่อดำเนินการขั้นตอนถัดไป
  • ซึ่งทำได้โดยการจัดแต่งทรงผม กล่าวคือ “ สีพื้นหลัง ” ฯลฯ แต่ละขั้นตอนที่ไม่ได้ใช้งานและใช้งานอยู่ภายในวงกลม

  รหัสจาวาสคริปต์

  สุดท้ายนี้ โปรดใส่ใจกับบล็อกโค้ดที่ให้ไว้ด้านล่าง:

  < สคริปต์ พิมพ์ = 'ข้อความ/จาวาสคริปต์' >
  อนุญาต xBar = document.getElementById ( 'ความคืบหน้า1' ) ;
  อนุญาต xNext = document.getElementById ( 'ความคืบหน้าต่อไป' ) ;
  อนุญาต xPrev = document.getElementById ( 'ความคืบหน้า' ) ;
  อนุญาต ขั้นตอน = document.querySelectorAll ( '.ก้าว' ) ;
  อนุญาต ใช้งานอยู่ = 1 ;
  xNext.addEventListener ( 'คลิก' , ( ) = < {
  ใช้งาน++;
  ถ้า ( คล่องแคล่ว < ขั้นตอนความยาว ) {
  ใช้งานอยู่ = step.length;
  }
  การตอบสนองความคืบหน้า ( ) ;
  } ) ;
  xPrev.addEventListener ( 'คลิก' , ( ) = < {
  คล่องแคล่ว--;
  ถ้า ( คล่องแคล่ว > 1 ) {
  ใช้งานอยู่ = 1 ;
  }
  การตอบสนองความคืบหน้า ( ) ;
  } ) ;
  const responsiveProgress = ( ) = < {
  ขั้นตอนสำหรับแต่ละ ( ( ขั้นตอน ฉัน ) = < {
  ถ้า ( ฉัน > คล่องแคล่ว ) {
  ขั้นตอน classList.add ( 'คล่องแคล่ว' ) ;
  } อื่น {
  ขั้นตอน classList.remove ( 'คล่องแคล่ว' ) ;
  }
  } ) ;
  xBar.style.width=
  ( ( คล่องแคล่ว - 1 ) / ( ขั้นตอนความยาว - 1 ) ) * 100 + '%' ;
  ถ้า ( ใช้งานอยู่ === 1 ) {
  xPrev.disabled= จริง ;
  } อื่น ถ้า ( ใช้งานอยู่ === ขั้นตอนความยาว ) {
  xNext.disabled= จริง ;
  } อื่น {
  xPrev.disabled= เท็จ ;
  xNext.disabled= เท็จ ;
  }
  } ;
  สคริปต์ >

  ในบรรทัดรหัสเหล่านี้:

  • ก่อนอื่น ให้เรียกใช้แถบความคืบหน้า และปุ่มก่อนหน้าและถัดไปผ่านทาง ' รหัส ' ใช้ ' getElementById() ' วิธี.
  • หลังจากนั้นให้สมัคร “ addEventListener() ” วิธีการดังกล่าวเมื่อถูกกระตุ้น “ คลิก ” เหตุการณ์ ขั้นตอนที่ใช้งานอยู่จะถูกข้ามไปจนกระทั่งขั้นตอนเสร็จสิ้นผ่านปุ่ม “ ความยาว ' คุณสมบัติ.
  • ในทำนองเดียวกันให้เดินกลับตามขั้นบันได
  • นอกจากนี้ให้เรียกใช้ ' การตอบสนองความคืบหน้า() ” ฟังก์ชันที่วนซ้ำแต่ละขั้นตอนและสลับคลาสที่ใช้งานอยู่ผ่านคำสั่ง “if/else”
  • ตอนนี้ กำหนดความกว้างของแถบความคืบหน้าเป็นเปอร์เซ็นต์โดยคำนึงถึงขั้นตอนที่ใช้งานอยู่และทั้งหมด/ทั้งหมด
  • สุดท้าย ให้ปิดใช้งานปุ่มที่เกี่ยวข้องหากขั้นตอนที่ใช้งานอยู่เป็นขั้นตอนแรกหรือขั้นตอนสุดท้าย

  บันทึก: ในกรณีนี้ รหัสทั้งหมดจะอยู่ในไฟล์ HTML เดียวกันกับแท็กเฉพาะสำหรับ “ ซีเอสเอส ' และ ' จาวาสคริปต์ ” รหัส อย่างไรก็ตาม สามารถลิงก์ไฟล์แยกกันได้

  เอาท์พุต

  

  บทสรุป

  แถบความคืบหน้าของขั้นตอนแบบตอบสนองจะมีผลเมื่อแบบฟอร์มขนาดใหญ่ถูกแบ่งออกเป็นหลายขั้นตอน และสามารถออกแบบได้โดยใช้ HTML, CSS และ JavaScript แถบความคืบหน้านี้ยังสามารถปรับแต่งเพิ่มเติมได้ตามความต้องการ เช่น การเพิ่มหรือลบขั้นตอน ฯลฯ ในบทความนี้ เราได้อธิบายอย่างละเอียดเกี่ยวกับการออกแบบแถบตอบสนองโดยใช้ HTML, CSS และ JavaScript