Cara membuat pemilih masa responsif menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Cara membuat pemilih masa responsif menggunakan HTML, CSS dan jQuery

王林

Lepaskan： 2023-10-26 11:27:13

asal

1003 orang telah melayarinya

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

dalam teg , yang atribut kelasnya ialah "pemilih masa" (pemilih masa) dan menetapkan kotak input teks dan butang ikon. Kod keseluruhan kelihatan seperti ini:

<!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>

Salin selepas log masuk

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;
}

Salin selepas log masuk

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');
  });
});

Salin selepas log masuk

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">

Salin selepas log masuk

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!