Heim > Artikel > Web-Frontend > So erstellen Sie eine reaktionsfähige Zeitauswahl mit HTML, CSS und jQuery
So erstellen Sie eine reaktionsfähige Zeitauswahl mit HTML, CSS und jQuery
- 王林Original
- 2023-10-26 11:27:131001Durchsuche
Wie man mit HTML, CSS und jQuery eine responsive Zeitauswahl erstellt
Im modernen Webdesign ist responsives Design zu einem sehr wichtigen Element geworden. Der Zeitwähler ist auch ein wesentlicher Bestandteil vieler Websites und Anwendungen. In diesem Artikel erfahren Sie, wie Sie mithilfe von HTML, CSS und jQuery eine reaktionsfähige Zeitauswahl erstellen, und stellen spezifische Codebeispiele als Referenz bereit.
Schritt 1: Erstellen Sie eine grundlegende HTML-Struktur
Zuerst müssen wir eine grundlegende HTML-Struktur erstellen, um die Zeitauswahl aufzunehmen. Wir können dem Tag
ein<!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>Schritt 2: CSS-Stile erstellen
Als nächstes müssen wir dieser Zeitauswahl einige grundlegende CSS-Stile hinzufügen, damit sie schöner und benutzerfreundlicher aussieht. Sie können sich auf das folgende Codebeispiel beziehen:
.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;
}Schritt 3: jQuery-Ereignisse hinzufügen
Jetzt müssen wir jQuery verwenden, um die interaktive Funktionalität der Zeitauswahl zu verwalten. Fügen Sie zunächst den folgenden Code in die JavaScript-Datei (script.js) ein:
$(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');
});
});Im obigen Code verwenden wir jQuery, um das Klickereignis des Zeitselektors abzuhören und den Fokus des Texteingabefelds festzulegen. Wenn das Texteingabefeld den Fokus erhält, ändern wir seinen Typ in „Zeit“, sodass der Benutzer die Zeitauswahl verwenden kann, um eine Zeit auszuwählen. Wenn das Texteingabefeld den Fokus verliert, ändern wir seinen Typ wieder in „Text“.
Schritt 4: FontAwesome-Symbolbibliothek hinzufügen
Um die Zeitauswahl schöner aussehen zu lassen, können wir die FontAwesome-Symbolbibliothek verwenden. Fügen Sie einfach den folgenden Code zum
-Tag in der HTML-Datei hinzu:<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
An diesem Punkt haben wir die Erstellung eines einfachen responsiven Zeitwählers abgeschlossen. Der Benutzer kann auf das Zeiteingabefeld klicken, um die Zeitauswahl aufzurufen und die gewünschte Zeit auszuwählen. Die ausgewählte Zeit wird im Zeiteingabefeld angezeigt.
Wenn Sie außerdem die Funktionalität und den Stil des Zeitwählers weiter verbessern möchten, können Sie den CSS-Stil und die jQuery-Ereignisse selbst ändern.
Zusammenfassung:
In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery einen einfachen, reaktionsfähigen Zeitwähler erstellen. Durch das Hinzufügen grundlegender HTML-Strukturen, CSS-Stile und jQuery-Ereignisse können wir eine benutzerfreundliche Zeitauswahl implementieren. Ich hoffe, dass dieser Artikel Ihnen hilft, reaktionsfähige Zeitwähler zu verstehen und zu erstellen.
Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine reaktionsfähige Zeitauswahl mit HTML, CSS und jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!