JS はシンプルなカレンダー効果を実装します

JS はシンプルなカレンダー効果を実装します

この記事では、シンプルなカレンダー効果を実現するためのJSの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

CS

* {
  マージン: 0;
  パディング: 0;
  リストスタイル: なし;
 }

 #箱 {
  幅: 280ピクセル;
  高さ: 360ピクセル;
  マージン: 50px 自動;
  背景色: 黒;
  色: アリスブルー;
  行の高さ: 40px;
 }

 #ヘッダー{
  高さ: 40px;
  色: アリスブルー;
  行の高さ: 40px;
 }

 #ヘッダースパン{
  フロート: 左;
  テキスト配置: 中央;
  上マージン: 10px;
  行の高さ: 40px;
 }

 #前へ,
 #次 {
  幅: 20%;
  行の高さ: 40px;
  カーソル: ポインタ;
 }

 #現在 {
  幅: 60%;
  行の高さ: 40px;
 }

 #週 li {
  幅: 40px;
  テキスト配置: 中央;
  フロート: 左;
  行の高さ: 40px;
 }

 #コンテンツ li {
  幅: 40px;
  テキスト配置: 中央;
  フロート: 左;
  行の高さ: 40px;
}

html

<div id="ボックス">
 <div id="ヘッダー">
  <span id="prev">前へ</span>
  <span id="現在"></span>
  <span id="next">次へ</span>
 </div>
 <ul id="週">
  <li>日</li>
  <li>1つ</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
 </ul>
 <ul id="コンテンツ">
  <!-- <li>31</li>
    <li>1</li>
    <li>2</li> -->
 </ul>
</div>```

js

var current = document.querySelector('#current');//月名
 var prev = document.querySelector('#prev'); // 先月 var next = document.querySelector('#next'); // 翌月 var content = document.querySelector('#content'); // 日付コンテンツ // 前月に表示する日数 // 今月の初日が何曜日かを調べる // 前月の最大日数を調べ、日付を 0 に設定する
 関数 getPrevDays(日付) {
  var date = new Date(date);
  // 曜日を取得するために、日付を最初の日に設定します date.setDate(1);
  var week = date.getDay();
  // 前月の最終日を取得するには日付を 0 に設定します date.setDate(0);
  var maxDay = date.getDate();
  var リスト = [];
  // 赤い日付の範囲を走査し、配列にプッシュします for (var i = maxDay - week + 1; i <= maxDay; i++) {
  リストをプッシュします。
  }
  リストを返します。
 }


 // 今月の日数を調べる // 月を次の月に繰り上げる // 日付を 0 に設定する
 関数 getNowDays(日付) {
  var date = new Date(date);
  date.setMonth(date.getMonth() + 1);
  日付を設定します。
  var maxDay = date.getDate();
  // コンソール.log(最大日数)
  var リスト = [];
  // 
  (var i = 1; i <= maxDay; i++) の場合 {
  リスト.push(i)
  }
  リストを返します。
 }



 // 次の月に表示する日数 function getNextDays(prevDays, nowDays) {
  var リスト = [];
  // 1ページのカレンダー42日、42 - 先月の日数 - 今月の日数 = 最後に来月の残りの日数を表示します for (var i = 1; i <= 42 - prevDays - nowDays; i++) {
  リスト.push(i)
  }
  返品リスト
 }

 var x = 1;
 // 出力日付の内容をカプセル化します // x はクリックされた月を記録し、その月の上の配列に従ってその月に表示される時刻を自動的に取得します function output(x) {
  arr1 = getPrevDays('2021-' + x);
  arr2 = getNowDays('2021-' + x);
  arr3 = getNextDays(arr1.length, arr2.length);
  // コンソールログ(arr2);
  var res = '';
  (var i = 0; i < arr1.length; i++) の場合 {
  res += '<li style="color:red;">';
  res += arr1[i];
  res += '</li>';
  }

  (var i = 0; i < arr2.length; i++) の場合 {
  res += '<li>';
  res += arr2[i];
  res += '</li>';
  }

  (var i = 0; i < arr3.length; i++) の場合 {
  res += '<li style="color:red;">';
  res += arr3[i];
  res += '</li>';
  }
  // 3 つの配列の出力結果を連結して出力​​します。 return content.innerHTML = res;
 }




 // 月の表示を出力します var date = new Date();
 current.innerHTML = showMonth(新しい日付());
 // 月関数 showMonth(date) {
  var date = new Date(date);
  date.setMonth(date.getMonth());
  var mon = date.getMonth();
  // var year = date.getFullyear();
  (mon + 1) + '月'を返します。
 }

 出力(x);
 // 来月 next.onclick = function () {
  ++;
  // コンソールログ(x);
  (x > 12) の場合 {
  x = 1;
  出力(x);
  } それ以外 {
  current.innerHTML = showMonth('2021-' + x);
  出力(x);
  }
 }

 // 先月 prev.onclick = function () {
  x--;
  コンソールログ(x);
  (x < 1) の場合 {
  x = 12;
  current.innerHTML = showMonth('2021-' + x);
  出力(x);
  } それ以外 {
  current.innerHTML = showMonth('2021-' + x);
  出力(x);
  }
 }

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

<<:  Mysql5.7 のルートパスワードを忘れた場合の対処法 (シンプルで効果的な方法)

>>:  ドメイン名を nginx サービスにバインドする方法

推薦する

HTML の基本概要推奨事項 (段落)

HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...

MySQLはデータベースのN+1クエリ問題を解決します

導入HibernateやMyBatisなどのORMフレームワークでは、部門に関連付けられたユーザーオ...

JavaScript配列重複排除の詳細な説明

目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...

MySQL 並列レプリケーションの簡単な分析

01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...

Linux でリモート サーバー ファイルの状態を表示する方法

以下のように表示されます。 test コマンドはファイルが存在するかどうかを判断します。 ssh u...

JavaScript が Jingdong のカルーセル効果を模倣

この記事では、JD.comのカルーセル効果の表示を実現するためのJavaScriptの具体的なコード...

Linux SecureCRT の文字化けの解決方法

SecureCRT が文字化けした文字を表示する状況を見てみましょう。例えば: ではリセットしてみま...

Linux システムが VMware にインストールされているかどうかを確認する方法

現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...

border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード

開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...

Django は Pillow を使用して検証コード機能を簡単に設定します (Python)

1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...

指定したディレクトリに nginx をインストールする方法の例

会社の要件により、異なる場所にある 2 つの nginx サーバーを同じマシンにインストールする必要...

MySQL でテーブルを作成するときの NULL と NOT NULL の使用方法の詳細な説明

MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...

Linux での UDP について学ぶ

目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...

vueプロジェクトは特定の領域に透かしを描くことを実現する

この記事では、Vueを使用して特定の領域に透かしを描く方法を紹介します。具体的な内容は次のとおりです...