So erstellen Sie eine reaktionsfähige Zeitauswahl mit HTML, CSS und jQuery-js-Tutorial-php.cn

So erstellen Sie eine reaktionsfähige Zeitauswahl mit HTML, CSS und jQuery

王林

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

Original

1076 Leute haben es durchsucht

So erstellen Sie eine reaktionsfähige Zeitauswahl mit HTML, CSS und jQuery

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

-Tag hinzufügen, dessen Klassenattribut „timepicker“ (Zeitauswahl) ist, und ein Texteingabefeld und eine Symbolschaltfläche festlegen. Der Gesamtcode sieht so aus:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!