時間範囲効果を実現するためのJavaScript

時間範囲効果を実現するためのJavaScript

この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

現在時刻より前の時間範囲(6か月前)

レンダリング

js ファイルのコード スニペット

/*クエリの日付範囲(現在時刻以降) Vivian 2020/12/04 追加 */
//rangeVal: 2つの日付間の区切り文字 num: 間隔 timeType: 時間の種類 function funGetRangeDateByLess(rangeVal,num,timeType){
    var returnVal="";
    var その他の値="";
    var その他の時間="";
    var curTime = 新しい Date();
    var curTimeVal = curTime.getFullYear() + '-' + PrefixZero((curTime.getMonth() + 1), 2) + '-' + PrefixZero(curTime.getDate(), 2);
    スイッチ (timeType) {
        ケース 1://var addMinutes = curTime.setMinutes(curTime.getMinutes() - num);
            otherTime=新しい日付(分を追加);
            壊す;
        ケース 2://var addMinutes = curTime.setHours(curTime.getHours() - num);
            otherTime=新しい日付(分を追加);
            壊す;
        ケース 3://dayvar addDate = curTime.setDate(curTime.getDate() - num);
            otherTime=新しい日付(addDate);
            壊す;
        ケース 4://monthvar addMonth = curTime.setMonth(curTime.getMonth() - num);
            otherTime=新しい日付(addMonth);
            壊す;
        ケース 5://yearvar addYear = curTime.setFullYear(curTime.getFullYear() - num);
            otherTime=新しい日付(addYear);
            壊す;
        デフォルト:
            壊す;
    }
    otherVal = otherTime.getFullYear() + '-' + PrefixZero((otherTime.getMonth() + 1), 2) + '-' + PrefixZero(otherTime.getDate(), 2);
    return returnVal=otherVal+rangeVal+curTimeVal;
}

/*ゼロを自動的に埋める Vivian 2020/12/04 追加 */
関数PrefixZero(num, n) {
    (Array(n).join(0) + num).slice(-n) を返します。
}

コードスニペットの使用

var fillhelptime=funGetRangeDateByLess(" , ",6,4);
laydate.render({
        要素: "#fillhelptime",
        範囲: "、"、
        タイプ: '日付'、
        value:fillhelptime, //デフォルト値 });

日付の時間範囲(前後何日)

レンダリング

js ファイルのコード スニペット

/*日付範囲を照会する(特定の日付の前後何日) Add By Vivian 2021/04/06 */
//rangeVal: 2 つの日付間の区切り文字date: 特定の日付beforeDays: 最初の N 日間afterDays: 最後の N 日間function funGetRangeDateByBeforeAndAfter(rangeVal,date,beforeDays,afterDays){
    var dateVaule1 = new Date(date);//時刻形式に変換 var dateVaule2 = new Date(date);//時刻形式に変換 var startDate = new Date(dateVaule1.setDate(dateVaule1.getDate() - beforeDays));//最初の N 日間 var endDate = new Date(dateVaule2.setDate(dateVaule2.getDate() + afterDays));//後の N 日間 var date1 = startDate.getFullYear() + '-' + PrefixZero((startDate.getMonth() + 1), 2) + '-' + PrefixZero(startDate.getDate(), 2);
    var date2 = endDate.getFullYear() + '-' + PrefixZero((endDate.getMonth() + 1), 2) + '-' + PrefixZero(endDate.getDate(), 2);
    var returnVal=日付1+範囲値+日付2;
    returnVal を返します。
}

/*ゼロを自動的に埋める Vivian 2020/12/04 追加 */
関数PrefixZero(num, n) {
    (Array(n).join(0) + num).slice(-n) を返します。
}

ある時点の時間範囲(前後何日)

レンダリング

js ファイルのコード スニペット

/*日付範囲を照会する(特定の時点の前後の時間はどれくらいか) Vivian 2021/04/06 追加 */
//rangeVal: 2 つの日付間の区切り文字 timeType: それらの間の時間タイプ date: 特定の日付 beforeDays: 最初の N 日 afterDays: 最後の N 日 function funGetRangeDateByBeforeAndAfter(rangeVal,timeType,date,beforeNum,afterNum){
    var dateVaule1 = new Date(date);//時刻形式に変換 var dateVaule2 = new Date(date);//時刻形式に変換 var startDate = "";
    var 終了日 = "";
    スイッチ (timeType) {
        ケース 1://startDate = new Date(dateVaule1.setMinutes(dateVaule1.getMinutes() - beforeNum));//最初の N 分endDate = new Date(dateVaule2.setMinutes(dateVaule2.getMinutes() + afterNum));//N 分後break;
        ケース 2://startDate = new Date(dateVaule1.setHours(dateVaule1.getHours() - beforeNum));//最初の N 時間endDate = new Date(dateVaule2.setHours(dateVaule2.getHours() + afterNum));//N 時間後break;
        ケース 3://daysstartDate = new Date(dateVaule1.setDate(dateVaule1.getDate() - beforeNum));//最初の N 日endDate = new Date(dateVaule2.setDate(dateVaule2.getDate() + afterNum));//N 日後break;
        ケース 4://monthstartDate = new Date(dateVaule1.setMonth(dateVaule1.getMonth() - beforeNum));//最初の N か月endDate = new Date(dateVaule2.setMonth(dateVaule2.getMonth() + afterNum));//N か月後break;
        case 5://yearstartDate = new Date(dateVaule1.setFullYear(dateVaule1.getFullYear() - beforeNum));//最初の N 年endDate = new Date(dateVaule2.setFullYear(dateVaule2.getFullYear() + afterNum));//N 年後var addYear = curTime.setFullYear(curTime.getFullYear() - num);
            壊す;
        デフォルト:
            壊す;
    }
    var returnVal1 = startDate.getFullYear() + '-' + PrefixZero((startDate.getMonth() + 1), 2) + '-' + PrefixZero(startDate.getDate(), 2);
    var returnVal2 = endDate.getFullYear() + '-' + PrefixZero((endDate.getMonth() + 1), 2) + '-' + PrefixZero(endDate.getDate(), 2);
    var returnVal=returnVal1+rangeVal+returnVal2;
    returnVal を返します。
}

/*ゼロを自動的に埋める Vivian 2020/12/04 追加 */
関数PrefixZero(num, n) {
    (Array(n).join(0) + num).slice(-n) を返します。
}

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

以下もご興味があるかもしれません:
  • JavaScriptは指定された範囲の時間リストを生成します
  • extjs 時間範囲選択自動判定実装コード

<<:  LinuxシステムにおけるMySQLの一般的な操作コマンド

>>:  nginxはdockerコンテナ内に設定ファイルを自動的に生成します

推薦する

Vue 3 で Vue Router リンクを拡張する方法

序文<router-link> タグは、Vue アプリ内のさまざまなページ間を移動するた...

MySQL インデックスがソートに与える影響の分析例

この記事では、例を使用して、MySQL インデックスがソートに与える影響を説明します。ご参考までに、...

myisamchk および mysqlcheck ツールを使用して破損した MySQL データベース ファイルを迅速に修復する方法

サーバーのデータベース ハード ディスク領域がいっぱいだったため、大量のデータの書き込みに失敗し、「...

IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策

最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...

現在のブラウザが JavaScript でヘッドレス ブラウザであるかどうかを検出する方法

目次ヘッドレスブラウザとは何ですか?なぜ「ヘッドレス」ブラウザと呼ばれるのでしょうか?ヘッドレスブラ...

JavaScript で charAt() を使用して、最も頻繁に出現する文字とその出現回数をカウントする方法を教えます。

前回は、JavaScript の charAt() メソッドの使い方を紹介しました。今日は、最も多く...

MySQL 最適化接続最適化

記事「MySQL の最適化: キャッシュの最適化」では、システムによってコンパイルされた変数値、また...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

CentOS 7 で RPM を使用して mysql5.7.13 をインストールする

0. 環境この記事のオペレーティング システム: CentOS 7.2.1511 x86_64 My...

Vue3 コンパイルプロセス - ソースコード分析

序文: Vue3 がリリースされてからかなり経ちますが、最近、会社のプロジェクトでVue3 + Ty...

MySQL サーバー IO 100% 分析および最適化ソリューション

序文ストレス テスト中に、リソース使用のボトルネックによって発生する最も直接的なパフォーマンスの問題...

CSS ロリポップを描くサンプルコード

背景: 毎日少しずつ進歩し、少しずつ積み重ねていけば、どんどん良くなっていきますコード: <!...

ブートストラップテーブルの使い方のまとめ

この記事では、bootstrapテーブルの使い方を参考までに紹介します。具体的な内容は次のとおりです...

HTMLリンクタグのrel属性

<link> タグは、現在のドキュメントと Web コレクション内の他のドキュメントとの...