HTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法

王林

リリース： 2023-10-26 11:27:13

オリジナル

1050 人が閲覧しました

HTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法

HTML、CSS、jQuery を使用してレスポンシブタイムピッカーを作成する方法

現代の Web デザインでは、レスポンシブデザインが非常に重要な要素になっています。タイムピッカーは、多くの Web サイトやアプリケーションにおいて不可欠なコンポーネントでもあります。この記事では、HTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法を紹介し、参考として具体的なコード例を示します。

ステップ 1: 基本的な HTML 構造を作成する

まず、時間セレクターに対応する基本的な HTML 構造を作成する必要があります。

タグ内にクラス属性が「timepicker」（タイムピッカー）の

タグを追加し、テキスト入力ボックスとアイコンボタンを設定できます。コード全体は次のとおりです。

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

ログイン後にコピー

ステップ 2: CSS スタイルを作成する

次に、このタイムピッカーにいくつかの基本的な CSS スタイルを追加して、見た目をより美しく、使いやすくする必要があります。次のコード例を参照してください。

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

ログイン後にコピー

ステップ 3: jQuery イベントの追加

次に、jQuery を使用してタイムピッカーの対話型関数を処理する必要があります。まず、次のコードを 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');
  });
});

ログイン後にコピー

上記のコードでは、jQuery を使用して時間セレクターのクリックイベントをリッスンし、テキスト入力ボックスにフォーカスを設定します。テキスト入力ボックスがフォーカスされると、ユーザーが時間ピッカーを使用して時間を選択できるように、そのタイプを「時間」に変更します。テキスト入力ボックスがフォーカスを失うと、そのタイプを「テキスト」に戻します。

ステップ 4: FontAwesome アイコンライブラリを追加する

タイムピッカーの外観をより美しくするために、FontAwesome アイコンライブラリを使用できます。次のコードを HTML ファイルのタグに追加するだけです:

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

ログイン後にコピー

この時点で、単純な応答時間ピッカーの作成が完了しました。ユーザーは時間入力ボックスをクリックして時間セレクターをポップアップ表示し、希望の時間を選択できます。選択した時間が時間入力ボックスに表示されます。

さらに、タイムピッカーの機能とスタイルをさらに強化したい場合は、CSS スタイルと jQuery イベントを自分で変更できます。

概要:

この記事では、HTML、CSS、jQuery を使用して単純な応答時間ピッカーを作成する方法を紹介します。基本的な HTML 構造、CSS スタイル、jQuery イベントを追加することで、使いやすいタイムピッカーを実装できます。この記事が、レスポンシブタイムピッカーの理解と作成に役立つことを願っています。

以上がHTML、CSS、jQuery を使用して応答時間ピッカーを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。