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 のインストールと設定のチュートリアル
推薦する
ウェブページの色特性の分類
色特性の分類あらゆる色は、赤、緑、青の三原色から構成されます。三原色の中で暖色なのは赤だけなので、作...
MySQL の効率的なクエリの左結合とグループ化 (プラス インデックス)
mysql 効率的なクエリMySQL は、左結合の速度を上げるために group by を犠牲にし...
優れたHTML印刷コードがページめくりをサポート
ylbtech_html_print HTML 印刷コード、ページめくりをサポートコードをコピーコー...
nginxのアップストリーム設定と機能の詳細な説明
設定例 アップストリームバックエンド{ サーバー backend1.example.com 重み=5...
ウォーターフォールレイアウト＋ダイナミックレンダリングの実装
目次典型的なウォーターフォールウェブサイトウォーターフォールフローレイアウトの原則一般的な考え方具体...
iframeを指すaタグのターゲットの名前とIDの違い
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...
CSS3 で作成した本のページめくり効果
結果：実装コード: html <!-- よろしければハートを付けてください! --> &...
JS の FileReader を介して .txt ファイルの内容を取得する方法
目次JSはFileReaderを通じて.txtファイルの内容を取得します。 .txtファイルの読み取...
JSはショッピングカート効果の単純な加算と減算を実装します
この記事の例では、ショッピングカートの簡単な追加と削除を実現するためのJSの具体的なコードを参考まで...
protobuf の簡単な紹介と Ubuntu 16.04 環境でのインストールチュートリアル
protobufの簡単な紹介Protobuf は、Google のオープンソースのシリアル化プロトコ...
MacでNodeとnpmを完全にアンインストールする方法
npmアンインストール sudo npm アンインストール npm -g この文に遭遇して npm ...
vue-router を遅延ロードする 3 つの方法のまとめ
遅延読み込みを使用しない 'vue' から Vue をインポートします。 '...
HTML の基礎_一般的なタグ、共通タグ、表
パート 1 HTML <html> -- 開始タグ<ヘッド>ウェブページ上の...
MySQL共通インデックスとユニークインデックスの詳細な説明
シナリオ1. ID番号のフィールドを備えた市民システムを維持する2. ビジネス コードでは、重複する...
初心者でもウェブサイトアイコンを作成する手順をすぐに学べます
<br />オリジナルURL: http://www.lxdong.com/post/m...