Comment créer un sélecteur de temps réactif en utilisant HTML, CSS et jQuery-js tutoriel-php.cn

Comment créer un sélecteur de temps réactif en utilisant HTML, CSS et jQuery

王林

Libérer： 2023-10-26 11:27:13

original

1075 Les gens l'ont consulté

Comment créer un sélecteur de temps réactif en utilisant HTML, CSS et jQuery

Dans la conception Web moderne, la conception réactive est devenue un élément très important. Le sélecteur de temps est également un composant essentiel dans de nombreux sites Web et applications. Cet article vous expliquera comment utiliser HTML, CSS et jQuery pour créer un sélecteur de temps réactif et fournira des exemples de code spécifiques à titre de référence.

Étape 1 : Créer une structure HTML de base

Tout d'abord, nous devons créer une structure HTML de base pour s'adapter au sélecteur de temps. Nous pouvons ajouter une balise

dans la balise , dont l'attribut de classe est "timepicker" (time picker), et définir une zone de saisie de texte et un bouton icône. Le code global ressemble à ceci :

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

Copier après la connexion

Étape 2 : Créer des styles CSS

Ensuite, nous devons ajouter quelques styles CSS de base à ce sélecteur de temps pour le rendre plus beau et plus facile à utiliser. Vous pouvez vous référer à l'exemple de code ci-dessous :

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

Copier après la connexion

Étape 3 : Ajouter des événements jQuery

Maintenant, nous devons utiliser jQuery pour gérer la fonctionnalité interactive du sélecteur de temps. Tout d'abord, ajoutez le code suivant dans le fichier 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');
  });
});

Copier après la connexion

Dans le code ci-dessus, nous utilisons jQuery pour écouter l'événement de clic du sélecteur de temps et faire en sorte que la zone de saisie de texte soit focalisée. Lorsque la zone de saisie de texte obtient le focus, nous changeons son type en « heure » afin que l'utilisateur puisse utiliser le sélecteur d'heure pour sélectionner une heure. Lorsque la zone de saisie de texte perd le focus, nous redéfinissons son type en « texte ».

Étape 4 : Ajouter la bibliothèque d'icônes FontAwesome

Pour rendre le sélecteur de temps plus beau, nous pouvons utiliser la bibliothèque d'icônes FontAwesome. Ajoutez simplement le code suivant à la balise dans le fichier HTML :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Copier après la connexion

À ce stade, nous avons terminé la création d'un simple sélecteur de temps réactif. L'utilisateur peut cliquer sur la zone de saisie de l'heure pour faire apparaître le sélecteur d'heure et sélectionner l'heure souhaitée. L'heure sélectionnée sera affichée dans la zone de saisie de l'heure.

De plus, si vous souhaitez augmenter encore les fonctionnalités et le style du sélecteur de temps, vous pouvez modifier vous-même le style CSS et les événements jQuery.

Résumé :

Cet article explique comment créer un sélecteur de temps réactif simple en utilisant HTML, CSS et jQuery. En ajoutant une structure HTML de base, des styles CSS et des événements jQuery, nous pouvons implémenter un sélecteur de temps convivial. J'espère que cet article vous aidera à comprendre et à créer des sélecteurs de temps réactifs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!