HTML5 ใช้แถบความคืบหน้าและเอฟเฟกต์แถบเลื่อนของตัวเอง

 <div id=d> <p id=pgv>ความคืบหน้า: %</p> <ความคืบหน้า id=pg สูงสุด= ค่า=></ความคืบหน้า> </div>

ใช้แท็กความคืบหน้าเพื่อตั้งค่าต่ำสุดและสูงสุด คุณสามารถใช้ค่าเพื่อรับค่าความคืบหน้าได้

 ฟังก์ชัน staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'ความคืบหน้า:' + pg.value + '%' } else { pgv.innerHTML = 'การโหลดเสร็จสมบูรณ์' clearInterval (ตัวจับเวลา) } }, ) }

ผลสุดท้ายมีดังนี้:

เอฟเฟกต์การแสดงผลนี้มีไว้สำหรับเบราว์เซอร์ Chrome IE และ FireFox มีสไตล์ที่แตกต่างกัน!

การเปลี่ยนแปลงสไตล์:

 ความคืบหน้า{ -webkit-appearance: none; } ::-webkit-progress-bar{ /* รับความคืบหน้า */ สีพื้นหลัง: สีส้ม; /* สีพื้นหลังที่ยังไม่ได้เติมของแถบความคืบหน้า*/ } ::-webkit-progress -value { สีพื้นหลัง: rgb(, , ); /* สีพื้นหลังของแถบความคืบหน้า*/ } ::-webkit-progress-inner-element { border: px solid black; ขอบด้านในของแถบความคืบหน้า โปรดสังเกตเพื่อแยกความแตกต่างจากโครงร่าง*/ }

สไตล์ที่นี่ทั้งหมดสำหรับเคอร์เนล webkit และไม่รองรับสไตล์อื่น ๆ ~~~ เอฟเฟกต์จะเป็นดังนี้:

ตั้งค่าประเภทอินพุตเป็นช่วง อย่างไรก็ตาม ไม่ใช่ทุกเบราว์เซอร์ที่รองรับแอตทริบิวต์นี้ หากไม่รองรับ คุณลักษณะเริ่มต้นจะถูกส่งกลับ ซึ่งก็คือ <input type=text>

(สำหรับรายละเอียด โปรดดูที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

สไตล์เริ่มต้น:

 <div id=d> <p>ตัวเลื่อนแบบลากได้ H:</p> <input type=range name=points min= max= id=hpro/> </div>

1. มาพร้อมคุณสมบัติ:

 (1), defaultValue = (rangeElem.max < rangeElem.min) ? rangeElem.min : rangeElem.min + (rangeElem.max - rangeElem.min)/2;

ค่าเริ่มต้น = (ตั้งค่าสูงสุด < ตั้งค่าขั้นต่ำ)? ตั้งค่าขั้นต่ำ: ตั้งค่าขั้นต่ำ + (ตั้งค่าสูงสุด - ตั้งค่าขั้นต่ำ) / 2 ---- จริงๆ แล้วเอาค่ากลาง

เราสามารถตั้งค่าของแถบเลื่อนด้วยค่า = 7

(2), <input type=range min=-10 max=10>

min: ตั้งค่าต่ำสุด; max: ตั้งค่าสูงสุด

(3), <input type=range min=5 max=10 step=0.01>

ขั้นตอน: ตั้งค่าขั้นตอน ค่าเริ่มต้นคือ 1 หากตั้งค่าต่ำสุดหรือสูงสุดด้วยจุดทศนิยม เช่น สูงสุด=3.14 ไม่สามารถรับจุดทศนิยมได้ คุณสามารถตั้งค่าขั้นตอนเป็น: step=any

(4) เครื่องหมายแฮชและป้ายกำกับ:

หมายเหตุ: ในปัจจุบัน ไม่มีเบราว์เซอร์ใดที่สนับสนุนคุณลักษณะทั้งสองของเครื่องหมายแฮชและป้ายกำกับอย่างสมบูรณ์ ตัวอย่างเช่น Firefox ไม่สนับสนุนทั้งสองอย่าง และ Chrome รองรับเครื่องหมายแฮชแต่ไม่รองรับป้ายกำกับ

ก) เครื่องหมายแฮช:

 <ประเภทอินพุต=ชื่อช่วง=คะแนน min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value=> <option value=> <option value=> <option value=> < ค่าตัวเลือก=> <ค่าตัวเลือก=> <ค่าตัวเลือก=> <ค่าตัวเลือก=> <ค่าตัวเลือก=> <ค่าตัวเลือก=> <ค่าตัวเลือก=> </รายการข้อมูล>

ข) ป้ายกำกับ:

 <ประเภทอินพุต=ชื่อช่วง=คะแนน min= max= step=any id=hpro list=tickmarks/> <datalist id=tickmarks> <option value= label=%> <option value=> <option value=> <option value => <ค่าตัวเลือก=> <ค่าตัวเลือก= ฉลาก=%> <ค่าตัวเลือก=> <ค่าตัวเลือก=> <ค่าตัวเลือก=> <ค่าตัวเลือก=> <ค่าตัวเลือก= ฉลาก=%> </รายการข้อมูล>

(5) ออโต้โฟกัสสามารถตั้งค่าหรือย้อนกลับได้ว่าตัวเลื่อนจะโฟกัสอัตโนมัติหรือไม่ หลังจากตั้งค่าเป็น True แล้ว ตัวเลื่อนจะถูกล็อคโดยอัตโนมัติเมื่อเข้าสู่หน้าเว็บ คุณสามารถควบคุมได้โดยการกดขึ้น ลง ซ้าย และขวาบนแป้นพิมพ์ .

2. การตกแต่งรูปลักษณ์ภายนอก:

 input[type=range] { เค้าร่าง: none; -webkit-appearance: none; /* ลบรูปแบบลักษณะที่ปรากฏเริ่มต้นของระบบ ซึ่งมักใช้เพื่อลบสไตล์ดั้งเดิมภายใต้ IOS*/ border-radius: px;

-webkit-appearance: ไม่มี; ลบสไตล์เริ่มต้น

 อินพุต [ประเภท = ช่วง] :: - webkit-slider-runnable-track { ความสูง: px; border-radius: px; box-shadow: px #deff, inset .em .em #d;

::-webkit-slider-runnable-track เป็นองค์ประกอบคลาสหลอก CSS ซึ่งเบราว์เซอร์บางรุ่นไม่รองรับ คุณสามารถรับแทร็กของ <input type=range>

สำหรับรายละเอียด โปรดดูที่: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* ลบรูปแบบเริ่มต้นของแถบเลื่อน*/ height: px; # BE; border-radius: %; border: solid .em rgba(, , , .);

::-webkit-slider-thumb สามารถรับแทร็กของ <input type=range>

ข้างต้นคือการใช้งาน HTML5 ที่เครื่องมือแก้ไขนำเสนอให้คุณพร้อมแถบความคืบหน้าและเอฟเฟกต์แถบเลื่อนของตัวเอง ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใดๆ โปรดฝากข้อความถึงฉัน แล้วเครื่องมือแก้ไขจะตอบกลับคุณทันเวลา . ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!