この記事では、シンプルなカレンダー効果を実現するための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 サービスにバインドする方法
みなさんこんにちは。今日はv-modelを使って親子コンポーネントのバインディング効果を実現する方法...
目次1. forループ: 基本的でシンプル2. forEach() メソッド: コールバック関数の使...
目次1. 画像のバイナリデータを表示する方法2. 絵の種類の見分け方3. 画像の種類を検出する方法3...
序文これまでは、パイプワークで割り当てた静的 IP は一時的なものであり、再起動すると無効になってい...
ElementUIページングコンポーネントPagination in Vueの使用は参考になります。...
この記事では、ネイティブ JS で実装されたデジタル時計エフェクトを紹介します。エフェクトは次のとお...
この記事では、Harbor アーキテクチャの構成と、実行時に各コンポーネントを使用する方法について説...
オペレーティングシステム: Windows10 MySQL バージョン: 8.0.13-winx64...
NTP は、ネットワーク上で時間を同期するための TCP/IP プロトコルです。通常、クライアントは...
<br />多くのウェブサイト デザイナーが犯す最も一般的な間違いは、ウェブページが I...
方法1: テーブル属性を使用する: header-cell-class-name テーブルインターフ...
序文Tomcat 内のすべてのリクエストは Servlet によって処理され、静的リソースも例外では...
Web ページのアクセシビリティは、フロントエンドでのみ評価および実装できるもののようです。ユーザビ...
この記事では、MySQL クラスター化インデックスのページ分割を例を使って説明します。ご参考までに、...
目次ステップ1. ルーティング ルールを設定し、子構成項目を使用します。 2. ジャンプ(フルパスを...