この記事の例では、参考までに時間セレクターを実装するための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年</li> <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年</li> <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年</li> </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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: MySQL 5.7 のインストールと設定のチュートリアル
いわゆるスライディングドアテクノロジーとは、さまざまな長さのテキストに合わせてボックスの背景を自動的...
element-uiを使用する場合、el-popoverというよく使われるコンポーネントがありますが...
導入Xiao A がコードを書いていたところ、DBA Xiao B が突然、「急いでユーザー固有情報...
今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...
この記事では、Linux で PHP curl 拡張機能をインストールする方法について説明します。ご...
Dockerにfastdfsをインストールするディレクトリをマウント-v /e/fdfs/トラッカー...
この記事の例では、ログインページを実装するためのlayuiの具体的なコードを参考までに共有しています...
達成される効果多くの場合、入力ボックスの値の変化をリアルタイムで監視し、ブラウザを誘導してウェブサイ...
目次1. データベースのマスター/スレーブ分類: 2. MySQL マスタースレーブの紹介3. マス...
目次序文1. オブジェクト構築にプロトタイプを設定する1.1 __proto__ の使用における特殊...
サーバーステータス分析Linux サーバーの CPU の詳細を表示する#CPU情報を表示[root@...
目次基本的な紹介入門テスト (Excel ファイルからのデータの読み取り)ステップ1: Maven座...
Web デザインは、インターネットの出現後に誕生した新興の周辺産業です。 Web ページは店頭のよう...
序文mysql モジュール (プロジェクト アドレスは https://github.com/mys...
取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...