HTML5 mengimplementasikan bilah kemajuan dan efek penggesernya sendiri

 <div id=d> <p id=pgv>Kemajuan: %</p> <kemajuan id=pg max= value=></kemajuan> </div>

Gunakan tag kemajuan untuk menetapkan nilai min dan maks. Anda dapat menggunakan nilai untuk mendapatkan nilai kemajuan

 function staticProgress () { var pg = document.getElementById('pg') var pgv = document.getElementById('pgv') var timer = setInterval(function () { if (pg.value !== ) { pg.value++ pgv .innerHTML = 'Kemajuan:' + pg.value + '%' } else { pgv.innerHTML = 'Pemuatan selesai' clearInterval(pengatur waktu) } }, ) }

Efek akhirnya adalah sebagai berikut:

Efek tampilan ini untuk browser chrome, IE dan FireFox memiliki gaya yang berbeda!

Perubahan gaya:

 kemajuan{ -webkit-appearance: none; } ::-webkit-progress-bar{ /* Dapatkan kemajuan */ background-color: oranye; /* Warna latar belakang bilah kemajuan yang tidak terisi*/ } ::-webkit-progress -value { warna latar belakang: rgb(, , ); /* Warna latar belakang dari bagian bilah kemajuan yang terisi*/ } ::-webkit-progress-inner-element { batas: px hitam pekat /* Batas bagian dalam bilah kemajuan, perhatikan untuk membedakannya dari garis luar*/ }

Gaya di sini semuanya untuk kernel webkit, dan gaya lain tidak didukung~~~ Efeknya adalah sebagai berikut:

Atur jenis input ke rentang. Namun, tidak semua browser mendukung atribut ini. Jika tidak, atribut default akan dikembalikan, yaitu <input type=text>

(Untuk detailnya, silakan merujuk ke https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)

Gaya bawaan:

 <div id=d> <p>H slider yang dapat diseret:</p> <input type=range name=points min= max= id=hpro/> </div>

1. Dilengkapi dengan atribut:

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

Nilai default = (tetapkan nilai maksimum < tetapkan nilai minimum)? Tetapkan nilai minimum: Tetapkan nilai minimum + (Tetapkan nilai maksimum - Tetapkan nilai minimum) / 2 ---- Bahkan, ambil nilai tengah

Kita dapat mengatur nilai slider dengan nilai=7.

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

min: tetapkan nilai minimum; max: tetapkan nilai maksimum

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

langkah: Tetapkan nilai langkah, defaultnya adalah 1. Jika min atau max diatur dengan koma desimal, contoh: max=3.14, koma desimal tidak dapat diperoleh, maka Anda dapat mengatur langkah ke: step=any.

(4), tanda pagar dan label:

Catatan: Saat ini, tidak ada browser yang sepenuhnya mendukung dua atribut tanda pagar dan label. Misalnya, Firefox tidak mendukung keduanya, dan Chrome mendukung tanda pagar tetapi tidak mendukung label.

a) tanda pagar:

 <tipe masukan=nama rentang=poin min= max= langkah=id apa pun=hpro daftar=tanda centang/> <id datalist=tanda centang> <nilai opsi=> <nilai opsi=> <nilai opsi=> <nilai opsi=> < nilai pilihan=> <nilai pilihan=> <nilai pilihan=> <nilai pilihan=> <nilai pilihan=> <nilai pilihan=> <nilai pilihan=> </datalist>

b) label:

 <tipe masukan=nama rentang=poin min= max= langkah=id apa pun=hpro daftar=tanda centang/> <id datalist=tanda centang> <nilai opsi= label=%> <nilai opsi=> <nilai opsi=> <nilai opsi => <nilai pilihan=> <nilai pilihan= label=%> <nilai pilihan=> <nilai pilihan=> <nilai pilihan=> <nilai pilihan=> <nilai pilihan= label=%> </daftar data>

(5) Fokus otomatis dapat mengatur atau mengembalikan apakah penggeser secara otomatis mendapatkan fokus. Setelah mengaturnya ke benar, penggeser akan terkunci secara otomatis saat memasuki halaman web .

2. Kecantikan penampilan:

 input[type=range] { outline: none; -webkit-appearance: none; /* Hapus gaya tampilan default sistem, sering digunakan untuk menghapus gaya asli di bawah IOS*/ border-radius: px }

-webkit-appearance: tidak ada; Hapus gaya default

 masukan[tipe=rentang]::-webkit-slider-runnable-track { tinggi: px; radius batas: px; bayangan kotak: px px #deff, inset .em .em #d }

::-webkit-slider-runnable-track adalah elemen kelas semu CSS, yang tidak didukung oleh semua browser. Anda bisa mendapatkan jejak <input type=range>

Untuk detailnya, lihat: https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-slider-runnable-track

 input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; /* Hapus gaya default slider*/ tinggi: px lebar: px; # BE; radius batas: %; batas: solid .em rgba(, , , .);

::-webkit-slider-thumb dapat memperoleh jejak <input type=range>

Di atas adalah implementasi HTML5 yang diperkenalkan oleh editor kepada Anda dengan bilah kemajuan dan efek penggesernya sendiri. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu . Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!