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 のインストールと設定のチュートリアル
推薦する
太字の <b> と <strong> の違いの分析
私たちウェブマスターは皆、ウェブサイトを最適化する際に記事内のキーワードを太字にすることが最適化に非...
MySQL Workbench の使い方チュートリアルの詳しい説明
目次(I) Workbenchを使用してデータベースを操作する①データベースを作成する② データベー...
Linux 環境での Oracle 導入チュートリアル
1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...
Dockerリンクはコンテナの相互接続を実現します
目次1.1. IP経由のコンテナ間のネットワークアクセス1.2. コンテナ名またはコンテナIDによる...
異なるドメイン名への PC または携帯電話のアクセスを区別するように Nginx を構成する方法
新しい公式サイトはオンラインですが、携帯電話で新しい公式サイトにアクセスすると、エクスペリエンスが非...
Angular のパフォーマンス最適化: サードパーティ コンポーネントと遅延読み込みテクノロジー
目次概要環境の準備プロジェクトのパフォーマンスに影響を与える要因遅延読み込みとは何ですか?プロジェク...
ブルートフォース攻撃を防ぐためのシェルスクリプト設定
シェルスクリプトはアクセス制御を設定し、複数回のログイン失敗後にIPをブロックしてSSHのブルートフ...
URLに基づいてリクエストを転送するnginxの実装の実践経験
序文これは fastdfs を使用してイントラネット外部に展開された分散ファイルシステムであるためで...
Blazor における CSS 分離の問題
1. 環境VS 2019 16.9.0 プレビュー 1.0 .NET SDK 5.0.100 2. ...
Vue ユニットテストに推奨されるプラグインと使用例
目次フレーム最高レベルのエラー報告活発なコミュニティとチーム冗談モカ推奨プラグインVue テストライ...
docker pruneコマンドは、あまり使用されないデータを定期的にクリーンアップするために使用できます。
目次docker システム df docker システム プルーンNoneオブジェクトをクリーンアッ...
jQuery プロジェクトで重複送信を防ぐ方法
新しいプロジェクトでは、axios によって重複した送信を防ぐことができますが、古いプロジェクト (...
Linuxブートサービスを起動する2つの方法
目次rc.local メソッドchkconfig メソッドrc.local メソッド1 まず自動的に...
分散ロックの原理と3つの実装方法の詳細な説明
現在、ほぼすべての大規模な Web サイトとアプリケーションは分散方式で展開されています。分散シナリ...
Nginxはhttpとhttpsの両方のアクセスをサポートするために同じドメイン名を設定します
Nginx は同じドメイン名で構成されており、http と https の両方でアクセスできます。証...