Rumah > Artikel > hujung hadapan web > Cara membuat pemilih masa responsif menggunakan HTML, CSS dan jQuery
Cara membuat pemilih masa responsif menggunakan HTML, CSS dan jQuery
- 王林asal
- 2023-10-26 11:27:131058semak imbas
Cara membuat pemilih masa responsif menggunakan HTML, CSS dan jQuery
Dalam reka bentuk web moden, reka bentuk responsif telah menjadi elemen yang sangat penting. Pemilih masa juga merupakan komponen penting dalam banyak tapak web dan aplikasi. Artikel ini akan memperkenalkan anda kepada cara menggunakan HTML, CSS dan jQuery untuk membuat pemilih masa responsif, dan akan memberikan contoh kod khusus untuk rujukan.
Langkah 1: Buat struktur HTML asas
Pertama, kita perlu mencipta struktur HTML asas untuk menampung pemilih masa. Kita boleh menambah teg
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="timepicker">
<input type="text" class="time-input" readonly>
<i class="fas fa-clock"></i>
</div>
</body>
</html>Langkah 2: Cipta gaya CSS
Seterusnya, kita perlu menambah beberapa gaya CSS asas pada pemilih kali ini untuk menjadikannya kelihatan lebih cantik dan mudah digunakan. Anda boleh merujuk kepada contoh kod di bawah:
.timepicker {
position: relative;
display: inline-block;
}
.time-input {
padding: 6px 12px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
.fa-clock {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
color: #666;
}Langkah 3: Tambahkan acara jQuery
Kini, kita perlu menggunakan jQuery untuk mengendalikan fungsi interaktif pemilih masa. Mula-mula, tambah kod berikut dalam fail JavaScript (script.js):
$(function() {
$('.timepicker').on('click', function() {
$('.time-input').focus();
});
$('.time-input').on('focus', function() {
$(this).attr('type', 'time');
});
$('.time-input').on('blur', function() {
$(this).attr('type', 'text');
});
});Dalam kod di atas, kami menggunakan jQuery untuk mendengar peristiwa klik pemilih masa dan menjadikan kotak input teks fokus. Apabila kotak input teks mendapat fokus, kami menukar jenisnya kepada "masa" supaya pengguna boleh menggunakan pemilih masa untuk memilih masa. Apabila kotak input teks hilang fokus, kami menukar jenisnya kembali kepada "teks".
Langkah 4: Tambahkan pustaka ikon FontAwesome
Untuk menjadikan pemilih masa kelihatan lebih cantik, kami boleh menggunakan perpustakaan ikon FontAwesome. Cuma tambah kod berikut dalam teg
dalam fail HTML:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
Pada ketika ini, kami telah menyelesaikan pengeluaran pemilih masa responsif yang mudah. Pengguna boleh mengklik kotak input masa untuk memunculkan pemilih masa dan memilih masa yang dikehendaki. Masa yang dipilih akan dipaparkan dalam kotak input masa.
Selain itu, jika anda ingin meningkatkan lagi fungsi dan gaya pemilih masa, anda boleh mengubah suai gaya CSS dan acara jQuery sendiri.
Ringkasan:
Artikel ini memperkenalkan cara membuat pemilih masa responsif yang mudah menggunakan HTML, CSS dan jQuery. Dengan menambahkan struktur HTML asas, gaya CSS dan acara jQuery, kami boleh melaksanakan pemilih masa yang mesra pengguna. Saya harap artikel ini akan membantu anda memahami dan mencipta pemilih masa responsif.
Atas ialah kandungan terperinci Cara membuat pemilih masa responsif menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!