jQueryは時間セレクタを実装する

jQueryは時間セレクタを実装する

この記事の例では、参考までに時間セレクターを実装するためのjQueryの具体的なコードを共有しています。具体的な内容は次のとおりです。

効果画像:

コード:

<!DOCTYPE html>
<html>
 <ヘッド>
  <メタ文字セット="utf-8" />
  <meta name="レンダラー" content="webkit">
  <meta http-equiv="X-UA-compatible" content="IE=Edge,chrome=1">
  <meta name="flexible" content="initial-dpr=2" />
  <meta name="ビューポート"
   コンテンツ="幅=デバイス幅、初期スケール=1、最小スケール=1、最大スケール=1、ユーザースケーラブル=いいえ" />
  <meta name="author" content="bright2017" />
  <title>時間セレクター</title>
  <スタイル タイプ="text/css">
   ul、li{
    リストスタイル: なし;
   }
   div{
    ボックスのサイズ: 境界線ボックス;
   }
   /* マスクレイヤー*/
   .hidden_​​view {
    幅: 100%;
    背景: #000000;
    不透明度: 0.7;
    位置: 固定;
    左: 0;
    上: 0;
    zインデックス: 9;
    表示: なし;
   }
   。フレックス{
    ディスプレイ: フレックス;
   }
   .請求セントタイム {
    幅: 100%;
    位置: 固定;
    左: 0;
    上: 0;
    zインデックス: 99;
    表示: なし;
   }
   .請求セントデータ {
    幅: 100%;
    高さ: 100%;
    コンテンツの中央揃え: 中央;
    アイテムの位置を中央揃えにします。
   }
   
   .請求_選択{
    幅: 230ピクセル;
    高さ: 230px;
    背景: #FFFFFF;
    位置: 相対的;
    境界線の半径: 3px;
   }
   .billing_select_top>div {
    テキスト配置: 中央;
    フォントサイズ: 15px;
    高さ: 55px;行の高さ: 55px;
   }
   .請求時間{
       幅: 100%;
       コンテンツの中央揃え: 中央;
       アイテムの位置を中央揃えにします。
       フォントサイズ: 15px;
       パディング: 0 20px;
   }
   .請求時間>div {
       幅: calc((100% - 30px)/3);
       テキスト配置: 中央;
       フォントの太さ: 太字;
   }
   .billing_select_center_new>ul {
       幅: calc((100% - 30px)/3);
       高さ: 100%;
       オーバーフロー:自動;
       パディング: 47px 0;
    ボックスのサイズ: 境界線ボックス;
   }
   .billing_select_center_new>ul>li {
       幅: 100%;
       高さ: 47px;
       行の高さ: 47px;
       フォントサイズ: 15px;
       テキスト配置: 中央;
       不透明度: .5;
   }
   .billing_time>div:n番目の子(2)、.billing_select_center_new>ul:n番目の子(2) {
       マージン: 0 15px;
   }
   .請求選択センター{
    幅: 100%;
    高さ: 141px;
    パディング: 0 20px;
    オーバーフロー: 非表示;
    位置: 相対的;
   }
   .billing_select_center_new {
       幅: 100%;
       高さ: 100%;
       ボックスのサイズ: 境界線ボックス;
       コンテンツの中央揃え: 中央;
       アイテムの位置を中央揃えにします。
   }
   .billing_select_bot {
    幅: 100%;
    テキスト配置: 中央;
    高さ: 45px;
    行の高さ: 45px;
    背景: #EEEEEE;
    テキスト配置: 中央;
    位置: 絶対;
    左: 0;
    下部: 0;
    zインデックス: 3;
    境界線の半径: 3px;
   }
   
   .billing_select_center>ul {
    幅: 100%;
    高さ: 100%;
    オーバーフロー:自動;
    パディング: 47px 0;
    位置: 絶対;
    左: 0;
    上: 0;
    zインデックス: 3;
   }
   
   .billing_select_center>ul>li {
    幅: 100%;
    高さ: 47px;
    行の高さ: 47px;
    フォントサイズ: 0.4rem;
    テキスト配置: 中央;
    不透明度: .5;
   }
   
   .請求選択境界線 {
    幅: calc(100% - 40px);
    左: 20px;
    高さ: 1px;
    位置: 絶対;
    上: 47px;
    背景色: #F2F2F2;
   }
   .請求選択ボーダー2 {
       幅: calc(100% - 40px);
       左: 20px;
       高さ: 1px;
       位置: 絶対;
       上: 94px;
       背景色: #F2F2F2;
   }
   
   .請求不透明度{
    不透明度: 1 !重要;
   }
   .終了時間{
    幅: 100px;高さ: 40px;行の高さ: 40px;境界線の半径: 5px;
    テキスト配置: 中央;マージン: 50px 自動;フォントサイズ: 17px;
   }
   .time_val{
    テキスト配置: 中央;フォントサイズ: 17px;
   }
  </スタイル>
 </head>
 <本文>
  <div class="end_time">時間を選択</div>
  <div class="time_val"></div>
  <!-- マスクレイヤー-->
  <div class="hidden_​​view"></div>
  <!-- 日付 -->
  <div class="請求セント時間">
   <div class="請求セントデータフレックス">
    <div class="請求選択請求選択2">
     <div class="billing_select_top">
      <div>締め切りを選択してください</div>
     </div>
     <div class="flex 請求時間">
      <div>年</div>
      <div>月</div>
      <div>日</div>
     </div>
     <div class="billing_select_center">
      <div class="billing_select_center_new flex">
       <ul class="billing_time_one">
        <li class="billing_opacity">2020</li>
        <li>2021</li>
        <li>2022</li>
        <li>2023</li>
        <li>2024年</li>
        <li>2025年</li>
        <li>2026</li>
        <li>2027年</li>
        <li>2028</li>
        <li>2029</li>
        <li>2030年</l​​i>
        <li>2031年</li>
        <li>2032</li>
        <li>2033</li>
        <li>2034</li>
        <li>2035年</li>
        <li>2036</li>
        <li>2037</li>
        <li>2038</li>
        <li>2039</li>
        <li>2040年</l​​i>
        <li>2041</li>
        <li>2042</li>
        <li>2043</li>
        <li>2044</li>
        <li>2045</li>
        <li>2046</li>
        <li>2047</li>
        <li>2048</li>
        <li>2049</li>
        <li>2050年</l​​i>
       </ul>
       <ul class="billing_time_two">
        <li class="billing_opacity">01</li>
        <li>02</li>
        <li>03</li>
        <li>04</li>
        <li>05</li>
        <li>06</li>
        <li>07</li>
        <li>08</li>
        <li>09</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
       </ul>
       <ul class="billing_time_three"></ul>
      </div>
      <div class="billing_select_border"></div>
      <div class="billing_select_border2"></div>
     </div>
     <div class="billing_select_bot">
      わかりました
    </div>
   </div>
  </div>
  <script src="js/jq.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   $(関数() {
    var heg = $(window).height();
    $(".hidden_​​view").height(heg);
    $(".billing_cent_time").height(heg);
    // スクロール イベントをリッスンします var scroll_year_index = '2020'; // 年 var scroll_month_index = '01'; // 月 var scroll_day_index = '01'; // 日// 年 const $ScrollWrap = $(".billing_time_one");
    // 月 const $ScrollWrap_month = $(".billing_time_two");
    // 日 const $ScrollWrap_day = $(".billing_time_three");
    // スクロール停止をリッスンします let t1 = 0;
    t2 = 0 とします。
    let timer = null; // タイマー let t3 = 0;
    t4 = 0 とします。
    let timer2 = null; // タイマー let t5 = 0;
    t6 = 0 とします。
    let timer3 = null; // タイマー // 年スクロール $ScrollWrap.on("touchstart", function() {
     // タッチ開始 ≈ スクロール開始})
    $ScrollWrap.on("スクロール", 関数() {
     //スクロール clearTimeout(timer)
     タイマー = setTimeout(isScrollEnd, 100)
     t1 = $ScrollWrap.scrollTop()
    })
 
    関数isScrollEnd() {
     t2 = $ScrollWrap.scrollTop();
     t2 == t1の場合{
      //スクロールが停止します clearTimeout(timer)
      // 各 li と上境界線の間の距離を取得します。var leng = $(".billing_time_one>li").length;
      (var k = 0; k < 長さ; k++) の場合 {
       var top_leng = $(".billing_time_one").children("li").eq(k).position().top;
       // 範囲が30から60の場合、選択される範囲は高さによって決まります if (top_leng >= 30 && top_leng <= 60) {
        scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim();
        $(".billing_time_one").children("li").removeClass("billing_opacity");
        $(".billing_time_one").children("li").eq(k).addClass("billing_opacity");
        // 月は0に戻ります
        $(".billing_time_two").scrollTop(0);
        $(".billing_time_three").scrollTop(0);
        // 対応する位置までスクロールし、各 li の高さは 47px です
        var scrool_heg = k * 47;
        $(".billing_time_one").scrollTop(scrool_heg);
       } それ以外 {
        トップの長さ = トップの長さ + 15;
        (top_leng >= 30 && top_leng <= 60) の場合 {
         scroll_year_index = $(".billing_time_one").children("li").eq(k).text().trim();
         $(".billing_time_one").children("li").removeClass("billing_opacity");
         $(".billing_time_one").children("li").eq(k).addClass("billing_opacity");
         // 月は0に戻ります
         $(".billing_time_two").scrollTop(0);
         $(".billing_time_three").scrollTop(0);
         // 対応する位置までスクロールし、各 li の高さは 47px です
         var scrool_heg = k * 47;
         $(".billing_time_one").scrollTop(scrool_heg);
        }
       }
      }
     }
    }
    // 月スクロール $ScrollWrap_month.on("touchstart", function() {
     // タッチ開始 ≈ スクロール開始})
    $ScrollWrap_month.on("スクロール", 関数() {
     //スクロール clearTimeout(timer2)
     タイマー2 = setTimeout(isScrollEnd2, 100)
     t3 = $ScrollWrap_month.scrollTop()
    })
 
    関数isScrollEnd2() {
     t4 = $ScrollWrap_month.scrollTop();
     t4 == t3の場合{
      //スクロールが停止します clearTimeout(timer2)
      // 各 li と上境界線の間の距離を取得します。var leng = $(".billing_time_two>li").length;
      (var k = 0; k < 長さ; k++) の場合 {
       var top_txt = $(".billing_time_two").children("li").eq(k).text().trim();
       var top_leng = $(".billing_time_two").children("li").eq(k).position().top;
       // 範囲が30から60の場合、選択される範囲は高さによって決まります if (top_leng >= 30 && top_leng <= 60) {
        scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();
        $(".billing_time_two").children("li").removeClass("billing_opacity");
        $(".billing_time_two").children("li").eq(k).addClass("billing_opacity");
 
        // 1 3 5 7 8 10 12月は31日あります // 2月は28日あります // 4 6 9 11月 30日間を検索 $(".billing_time_three").children("li").remove();
        top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt == 08 || の場合
         トップ_txt == 10 || トップ_txt == 12) {
         31日目();
        }
        (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) の場合 {
         30日目();
        }
        (top_txt == 02)の場合{
         28日目();
        }
        $(".billing_time_three").scrollTop(0);
        // 対応する位置までスクロールし、各 li の高さは 47px です
        var scrool_heg = k * 47;
        $(".billing_time_two").scrollTop(scrool_heg);
       } それ以外 {
        トップの長さ = トップの長さ + 15;
        (top_leng >= 30 && top_leng <= 60) の場合 {
         scroll_month_index = $(".billing_time_two").children("li").eq(k).text().trim();
         $(".billing_time_two").children("li").removeClass("billing_opacity");
         $(".billing_time_two").children("li").eq(k).addClass("billing_opacity");
 
         // 1 3 5 7 8 10 12月は31日あります // 2月は28日あります // 4 6 9 11月 30日間を検索 $(".billing_time_three").children("li").remove();
         (top_txt == 01 || top_txt == 03 || top_txt == 05 || top_txt == 07 || top_txt ==
          08 ||
          トップ_txt == 10 || トップ_txt == 12) {
          31日目();
         }
         (top_txt == 04 || top_txt == 06 || top_txt == 09 || top_txt == 11) の場合 {
          30日目();
         }
         (top_txt == 02)の場合{
          28日目();
         }
         $(".billing_time_three").scrollTop(0);
         // 対応する位置までスクロールし、各 li の高さは 47px です
         var scrool_heg = k * 47;
         $(".billing_time_two").scrollTop(scrool_heg);
        }
       }
      }
     }
    }
    // 日のスクロール $ScrollWrap_day.on("touchstart", function() {
     // タッチ開始 ≈ スクロール開始})
    $ScrollWrap_day.on("スクロール", 関数() {
     //スクロール clearTimeout(timer3)
     タイマー3 = setTimeout(isScrollEnd3, 100)
     t5 = $ScrollWrap_day.scrollTop()
    })
 
    関数isScrollEnd3() {
     t6 = $ScrollWrap_day.scrollTop();
     t6 == t5の場合{
      //スクロールが停止します clearTimeout(timer3)
      // 各 li と上境界線の間の距離を取得します。var leng = $(".billing_time_three>li").length;
      (var k = 0; k < 長さ; k++) の場合 {
       var top_leng = $(".billing_time_three").children("li").eq(k).position().top;
       // 範囲が30から60の場合、選択される範囲は高さによって決まります if (top_leng >= 30 && top_leng <= 60) {
        scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim();
        $(".billing_time_three").children("li").removeClass("billing_opacity");
        $(".billing_time_three").children("li").eq(k).addClass("billing_opacity");
 
        // 対応する位置までスクロールし、各 li の高さは 47px です
        var scrool_heg = k * 47;
        console.log("0000000", スクロール_heg)
        $(".billing_time_three").scrollTop(scrool_heg);
       } それ以外 {
        トップの長さ = トップの長さ + 15;
        (top_leng >= 30 && top_leng <= 60) の場合 {
         scroll_day_index = $(".billing_time_three").children("li").eq(k).text().trim();
         $(".billing_time_three").children("li").removeClass("billing_opacity");
         $(".billing_time_three").children("li").eq(k).addClass("billing_opacity");
 
         // 対応する位置までスクロールし、各 li の高さは 47px です
         var scrool_heg = k * 47;
         $(".billing_time_three").scrollTop(scrool_heg);
        }
       }
      }
     }
    }
 
    // 表示 $(".end_time").click(function() {
     $(".hidden_​​view").show();
     $(".billing_cent_time").show();
    });
 
 
    // デフォルトの時間は 31 日です day31();
 
    関数 day28() {
     (var k = 1; k <= 28; k++) の場合 {
      var num = '0' + k;
      var txt = `<li>${num}</li>`;
      var txt2 = `<li>${k}</li>`;
      (k >= 10) の場合 {
       $(".billing_time_three").append(txt2);
      } それ以外 {
       $(".billing_time_three").append(txt)
      }
     }
     (k >= 28) の場合 {
      $(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
     }
    }
 
    関数 day30() {
     (var k = 1; k <= 30; k++) の場合 {
      var num = '0' + k;
      var txt = `<li>${num}</li>`;
      var txt2 = `<li>${k}</li>`;
      (k >= 10) の場合 {
       $(".billing_time_three").append(txt2);
      } それ以外 {
       $(".billing_time_three").append(txt)
      }
     }
     (k >= 30) の場合 {
      $(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
     }
    }
 
    関数 day31() {
     (var k = 1; k <= 31; k++) の場合 {
      var num = '0' + k;
      var txt = `<li>${num}</li>`;
      var txt2 = `<li>${k}</li>`;
      (k >= 10) の場合 {
       $(".billing_time_three").append(txt2);
      } それ以外 {
       $(".billing_time_three").append(txt)
      }
     }
     (k >= 31)の場合{
      $(".billing_time_three").children("li").eq(0).addClass("billing_opacity");
     }
    }
 
    // 確認 $(".billing_select_bot").click(function() {
     console.log(scroll_year_index, "年~", scroll_month_index, '月~', scroll_day_index)
     var tim_cent = scroll_year_index + "-" + scroll_month_index + '-' + scroll_day_index;
     $(".hidden_​​view").hide();
     $(".billing_cent_time").hide();
     $(".time_val").text(tim_cent);
    });
   });
  </スクリプト>
 </本文>
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • jQueryセレクタの使い方の紹介
  • JQueryセレクターの詳細な説明
  • jQuery タグセレクターの適用例の詳細な説明
  • jQueryセレクターの基本的な使用例
  • JQueryのよく使われるセレクター関数と使用例の分析
  • jQueryフォームセレクターの使用方法の詳細な説明
  • jQuery 属性セレクタの使用例の分析
  • jQueryセレクター属性フィルターセレクターの詳細な説明
  • jQueryセレクタフォーム要素セレクタの詳細な説明
  • JQueryセレクターの使用方法の詳細な説明

<<:  Linux でファイルの種類を理解して識別する方法

>>:  MySQL 5.7 のインストールと設定のチュートリアル

ブログ    

推薦する

スライドドアを実装するための CSS サンプルコード

いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...

elementui の el-popover スタイルの変更が有効にならない問題の解決策

element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...

MySQL 自動インクリメント ID のオーバーサイズ問題のトラブルシューティングと解決策

導入Xiao A がコードを書いていたところ、DBA Xiao B が突然、「急いでユーザー固有情報...

MySQL 10進数符号なし更新負数を0に変換

今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...

Linux で PHP curl 拡張機能をインストールする方法の詳細な説明

この記事では、Linux で PHP curl 拡張機能をインストールする方法について説明します。ご...

Docker で FastDFS をデプロイする方法

Dockerにfastdfsをインストールするディレクトリをマウント-v /e/fdfs/トラッカー...

layui をベースにしたログインページの実装

この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...

HTML入力で値が変更されたときにリスナーイベントを追加することの簡単な分析

達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...

MySQLデータベースのマスタースレーブレプリケーションの原理と機能の分析

目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...

JS のオブジェクトリテラルの詳細な説明

目次序文1. オブジェクト構築にプロトタイプを設定する1.1 __proto__ の使用における特殊...

Linux サーバーのステータスとパフォーマンスに関連するコマンドの詳細な説明

サーバーステータス分析Linux サーバーの CPU の詳細を表示する#CPU情報を表示[root@...

Apache POIの基本的な使い方の詳しい説明

目次基本的な紹介入門テスト (Excel ファイルからのデータの読み取り)ステップ1: Maven座...

ウェブデザイナーが持つべき資質と能力

Web デザインは、インターネットの出現後に誕生した新興の周辺産業です。 Web ページは店頭のよう...

Node.js mysqlクライアントが認証プロトコルをサポートしていない問題を解決する

序文mysql モジュール (プロジェクト アドレスは https://github.com/mys...

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...