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年</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 のインストールと設定のチュートリアル
推薦する
スライドドアを実装するための 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 ログはトランザクションのロール...