Rumah > Artikel > hujung hadapan web > Bagaimana untuk memilih kawalan masa dengan jquery
Bagaimana untuk memilih kawalan masa dengan jquery
- WBOYasal
- 2023-05-23 20:47:062054semak imbas
Dengan perkembangan Internet, kawalan pemilihan masa menjadi semakin biasa digunakan dalam pembangunan web. Antaranya, pemalam pemilih masa jQuery mempunyai kelebihan yang jelas dalam operasi mudah dan kesan yang cantik, dan dialu-alukan secara meluas dan disokong oleh pembangun. Artikel ini akan memperkenalkan cara menggunakan pemalam pemilih masa jQuery untuk membantu pembangun melaksanakan kawalan pemilihan masa dengan lebih pantas dan lebih mudah.
1. Pengenalan kepada pemalam pemilih masa jQuery
Pemalam pemilih masa jQuery ialah pemalam pemilih tarikh dan masa yang pantas, fleksibel, merentas penyemak imbas yang bergantung pada perpustakaan jQuery dan mempunyai penyesuaian, Mudah dikembangkan, gaya yang cantik dan ciri-ciri lain. Ia mudah digunakan, menyokong berbilang bahasa, boleh disesuaikan dengan tinggi dan menyediakan fungsi panggil balik acara yang kaya. Pembangun hanya perlu memperkenalkan fail JS dan CSS yang berkaitan dan hanya memanggil mereka untuk melaksanakan kawalan pemilihan masa. Pada masa ini, terdapat berbilang versi pemalam pemilih masa jQuery Artikel ini merujuk kepada pemalam dengan nombor versi 2.1.9.
2. Penggunaan pemalam pemilih masa jQuery
- Pengenalan fail berkaitan
Pertama sekali, anda perlu memperkenalkan perpustakaan jQuery dan Fail JS dan CSS berkaitan pemalam pemilih masa jQuery.
<head> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/jquery-timepicker/2.1.9/jquery.timepicker.min.css"> </head>
- reka letak halaman HTML
Seterusnya, tambahkan teg input pada halaman sebagai bekas untuk pemilih masa.
<input type="text" class="timepicker" />
Antaranya, nilai atribut kelas ialah pemilih masa, menunjukkan bahawa teg input ini ialah pemilih masa.
- Mulakan pemalam
Panggil kaedah timepicker() bagi pemalam pemilih masa jQuery untuk memulakan pemilih masa.
$(document).ready(function() {
$('.timepicker').timepicker();
});Antaranya, kaedah ready() digunakan untuk memastikan dokumen telah dimuatkan sepenuhnya sebelum melaksanakan kod JavaScript. Kaedah timepicker() digunakan untuk memulakan pemilih masa, yang mempunyai pelbagai parameter pilihan dan boleh sangat disesuaikan.
- Penggunaan fungsi lanjutan
Selain pemilihan masa asas, pemalam pemilih masa jQuery juga menyediakan banyak fungsi lanjutan, seperti menetapkan format masa, menetapkan minit selang waktu, menambah had masa, menukar bahasa, dsb. Di bawah, pelaksanaan fungsi biasa ini akan diperkenalkan masing-masing.
(1) Tetapkan format masa
Dengan menetapkan atribut format, anda boleh menetapkan format pemilih masa. Pilihan pemformatan boleh termasuk format tarikh, format masa dan masa awal (jika anda ingin memaparkan masa awal, anda perlu menetapkan masa yang sepadan).
$(function() {
$("#timepicker").timepicker({
timeFormat: "HH:mm:ss",
dateFormat: "yy-mm-dd",
dateTimeFormat: "yy-mm-dd HH:mm:ss",
initialValue: "09:00"
});
});Kod di atas menetapkan format masa pemilih masa kepada "HH:mm:ss", format tarikh kepada "yy-mm-dd", dan format masa tarikh kepada "yy-mm- dd HH:mm" :ss", masa awal ialah "09:00".
(2) Tetapkan selang minit
Dengan menetapkan atribut langkah, anda boleh menetapkan selang minit dan kedua pemilih masa, mengambil 15 minit sebagai contoh:
$(function() {
$("#timepicker").timepicker({
step: 15 * 60 // 单位为秒
});
});Tetapan kod di atas Selang minit pemilih masa ditetapkan kepada 15 minit.
(3) Tambah had masa
Dengan menetapkan atribut minTime dan maxTime, anda boleh mengehadkan julat masa pemilih masa, mengambil 9:00 hingga 17:00 sebagai contoh:
$(function() {
$("#timepicker").timepicker({
minTime: "9:00",
maxTime: "17:00"
});
});Kod di atas menetapkan masa terawal pemilih masa kepada 9:00 dan masa terkini kepada 17:00.
(4) Tukar bahasa
Dengan menetapkan pek bahasa, anda boleh menukar bahasa pemilih masa.
$(function() {
$("#timepicker").timepicker({
timeFormat: "HH:mm",
lang: "zh"
});
});Kod di atas menetapkan format masa pemilih masa kepada "HH:mm" dan bahasa kepada bahasa Cina.
3. Ringkasan
Artikel ini memperkenalkan cara menggunakan pemalam pemilih masa jQuery untuk melaksanakan kawalan pemilihan masa. Dengan memperkenalkan fail yang berkaitan, menambah reka letak halaman HTML dan memulakan pemalam, anda boleh mencipta pemilih masa yang cantik dan praktikal dengan cepat. Selain itu, pemilih masa boleh disesuaikan lagi dengan menetapkan ciri lanjutan seperti format masa, selang minit, had masa dan pek bahasa. Oleh itu, bagi pembangun yang membangunkan pemilih masa, belajar menggunakan pemalam pemilih masa jQuery adalah kemahiran yang sangat diperlukan.
Atas ialah kandungan terperinci Bagaimana untuk memilih kawalan masa dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!