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 サービスにバインドする方法

推薦する

Vue における v-model を使用したクロスコンポーネントバインディングの基本的な実装方法

みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...

JavaScript 配列を走査する 5 つの方法

目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...

ファイルの種類を検出するJavaScriptメソッド

目次1. 画像のバイナリデータを表示する方法2. 絵の種類の見分け方3. 画像の種類を検出する方法3...

Docker バインディング固定 IP/クロスホストコンテナ相互アクセス操作

序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...

ElementUI ページネーション コンポーネントの使い方 Vue でのページネーション

ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...

デジタルテーブル特殊効果を実現するネイティブJS

この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...

DockerプライベートライブラリHarborのアーキテクチャとコンポーネントの説明

この記事では、Harbor アーキテクチャの構成と、実行時に各コンポーネントを使用する方法について説...

Win10 システムに MySQL8.0.13 をインストールする際の問題と解決策

オペレーティングシステム: Windows10 MySQL バージョン: 8.0.13-winx64...

Ubuntu で時刻同期に NTP を使用する

NTP は、ネットワーク上で時間を同期するための TCP/IP プロトコルです。通常、クライアントは...

ウェブページ作成時に標準 HTML コードを使用する際のポイント

<br />多くのウェブサイト デザイナーが犯す最も一般的な間違いは、ウェブページが I...

ヘッダーのチェックボックスをテキスト実装コードに変更するための選択テーブルを持つ要素

方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフ...

Tomcat で静的リソースを処理するチュートリアル

序文Tomcat 内のすべてのリクエストは Servlet によって処理され、静的リソースも例外では...

優れたウェブフロントエンドデザインの指標

Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビ...

MySQL クラスター化インデックスのページ分割原理の分析例

この記事では、MySQL クラスター化インデックスのページ分割を例を使って説明します。ご参考までに、...

Vue-router ネストルーティングの詳細な説明

目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...