時間範囲効果を実現するための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コンテナ内に設定ファイルを自動的に生成します

推薦する

vite+vue3+element-plus プロジェクトをビルドする手順

viteを使用してvue3プロジェクトを構築するターミナルで次のコマンドを実行すると、Vite を使...

ubuntu14.04 に jdk1.8 をインストールするチュートリアル

1. jdkダウンロードアドレスをダウンロードする我下載的是jdk-8u221-linux-x64....

MySQL マスタースレーブレプリケーションの役割と動作原理の詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...

MySQL シリーズ: redo ログ、undo ログ、binlog の詳細な説明

取引の実施REDO ログはトランザクションの永続性を保証し、UNDO ログはトランザクションのロール...

Mysqlデータテーブルでワームレプリケーションを使用する方法

簡単に言えば、MySQL ワーム レプリケーションは、クエリされたデータを指定されたデータ テーブル...

Nginx 静的サービス設定の詳細な説明 (ルートとエイリアスの指示)

静的ファイルNginx は高いパフォーマンスで知られており、フロントエンドのリバース プロキシ サー...

Ubuntu 18.04にmysql5.7をインストールする

Ubuntu 18.04では参考までにmysql 5.7をインストールします。具体的な内容は以下のと...

データベースのインデックス作成に関する知識ポイントのまとめ。必要な情報はすべてここにあります。

データベースインデックスについては皆さんもよくご存知だと思います。 インデックスは、データベース テ...

MySQLクエリ構文の概要

序文:この記事では主に、MySQL の where、group by、order by、limit、...

Vue大画面表示適応方法

この記事では、vueの大画面表示適応の具体的なコードを参考までに紹介します。具体的な内容は以下のとお...

Vue3.0 における Ref と Reactive の違いの詳細な分析

目次参照と反応参照反応的RefとReactiveの違いshallowRef と shallowRea...

MySQLクエリ速度を最適化する方法

前の章では、高性能な MySQL に不可欠な、最適化されたデータ型の選択方法とインデックスの効率的な...

レスポンシブウェブデザインを実現するためにIEでCSS3メディアクエリをサポートする

今日の画面解像度は、320 ピクセル (iPhone) ほど小さいものから、2560 ピクセル以上 ...

Vue2.0の双方向データバインディング原則を手動で実装する

一言で言えば: データハイジャック (Object.defineProperty) + パブリッシュ...