จะสร้างแถบความคืบหน้าใน HTML ได้อย่างไร?

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

• จะสร้างแถบความคืบหน้าใน HTML ได้อย่างไร?
• แถบความคืบหน้า: ตัวอย่าง

เอาล่ะ.

จะสร้างแถบความคืบหน้าใน HTML ได้อย่างไร?

แถบความคืบหน้าแสดงความคืบหน้าของงานใด ๆ ที่กำลังดำเนินการ โดยทั่วไปแถบเหล่านี้จะใช้เพื่อแสดงสถานะการดาวน์โหลดและการอัปโหลด เราสามารถพูดได้ว่า Progress Bars สามารถใช้เพื่อแสดงสถานะของทุกสิ่งที่กำลังดำเนินการอยู่

ในการสร้างแถบความคืบหน้าพื้นฐานโดยใช้ ต้องดำเนินการตามขั้นตอนต่อไปนี้:

• สร้างโครงสร้าง HTML สำหรับแถบความคืบหน้าของคุณ - HTML แท็ก ระบุความคืบหน้าของงาน

• การเพิ่ม CSS - ขั้นตอนต่อไปคือการเพิ่มสีพื้นหลังของแถบความคืบหน้าตลอดจนสถานะความคืบหน้าในแถบด้วยความช่วยเหลือของ CSS .

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 1% height: 35px background-color: # 4CAF50 text-align: center line-height: 32px color: black}

• การเพิ่ม JavaScript - ขั้นตอนต่อไปคือการสร้างแถบความสามารถในการเคลื่อนไหวแบบไดนามิกโดยใช้ ฟังก์ชันจาวาสคริปต์ อัพเดต และ ฉาก .

ฟังก์ชัน update () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (ฉาก 10) ฟังก์ชันฉาก () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

เมื่อคุณทราบขั้นตอนต่างๆในการสร้างแถบความคืบหน้าแล้วเรามาดูตัวอย่างทั้งหมดของแถบความคืบหน้ากัน

แถบความคืบหน้า: ตัวอย่าง

เมื่อคุณทำตามขั้นตอนต่างๆในการสร้างแถบความคืบหน้าเรียบร้อยแล้วก็ถึงเวลาเชื่อมโยง HTML, CSS และ องค์ประกอบ JavaScript . ตัวอย่างต่อไปนี้แสดงโค้ดทั้งหมดของแถบความคืบหน้าที่เชื่อมโยงด้านบน HTML, CSS และ JavaScript รหัส:

วิธีค้นหาจำนวนที่มากที่สุดใน array java

#Progress_Status {width: 50% background-color: #ddd} #myprogressBar {width: 2% height: 20px background-color: # 4CAF50}
ตัวอย่างแถบความคืบหน้าโดยใช้ JavaScript
 
ดาวน์โหลดสถานะของไฟล์:
  
เริ่มการอัปเดตฟังก์ชันการดาวน์โหลด () {var element = document.getElementById ('myprogressBar') var width = 1 var identity = setInterval (scene, 10) function scene () {if (width> = 100) {clearInterval (identity)} else {width ++ element.style.width = width + '%'}}}

เอาท์พุต:

ด้วยเหตุนี้เราจึงมาถึงตอนท้ายของบทความของเรา ฉันหวังว่าคุณจะเข้าใจขั้นตอนต่างๆที่จำเป็นในการสร้างแถบความคืบหน้า

ตรวจสอบ ซึ่งมาพร้อมกับการฝึกอบรมสดที่นำโดยผู้สอนและประสบการณ์โครงการในชีวิตจริง การฝึกอบรมนี้ทำให้คุณมีความเชี่ยวชาญในทักษะในการทำงานกับเทคโนโลยีเว็บส่วนหลังและส่วนหน้า รวมถึงการฝึกอบรมเกี่ยวกับ Web Development, jQuery, Angular, NodeJS, ExpressJS และ MongoDB

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของบล็อกนี้แล้วเราจะติดต่อกลับไป