この記事では、シンプルなカレンダー効果を実現するための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 サービスにバインドする方法
データベースバージョン: mysql> select version(); +--------...
HTML段落段落は <p> タグによって定義されます。例<p>これは段落で...
導入HibernateやMyBatisなどのORMフレームワークでは、部門に関連付けられたユーザーオ...
目次1. アレイ重複排除2. 配列内のオブジェクトの重複排除3. 配列内の同じフィールドに基づいて別...
01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...
以下のように表示されます。 test コマンドはファイルが存在するかどうかを判断します。 ssh u...
この記事では、JD.comのカルーセル効果の表示を実現するためのJavaScriptの具体的なコード...
SecureCRT が文字化けした文字を表示する状況を見てみましょう。例えば: ではリセットしてみま...
現在の Linux システムが VMware にインストールされているかどうかを確認する方法を教えて...
開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...
1. モジュールをインポートし、検証状態を定義する PIL から Image、ImageDraw、...
会社の要件により、異なる場所にある 2 つの nginx サーバーを同じマシンにインストールする必要...
MySQL の仕様によっては、テーブル作成仕様にすべてのフィールドが空であってはならないという要件を...
目次1. UDPとLinuxの基礎の紹介2. 各機能の使い方1. ソケット機能の使用2. バインド機...
この記事では、Vueを使用して特定の領域に透かしを描く方法を紹介します。具体的な内容は次のとおりです...