この記事では、JavaScriptカスタムカレンダーエフェクトの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 実装のアイデア:各月の最初の日に曜日を取得し、前の日を空白として入力し、各月の日数を取得し、ループに入力し、現在の時間を判断して別のスタイルを追加し、前の月と次の月をクリックしたときに月を変更します。 現在の月の最初の日を取得します。戻り値は 0 (日曜日) から 6 (土曜日) までの整数です。 var date = 新しい Date(); var y = date.getFullYear(); var m = date.getMonth(); 新しい Date(y,m,1).getDay(); 現在の月の日数を取得します var date = 新しい Date(); var y = date.getFullYear(); var m = date.getMonth(); 新しい日付(y,m+1,-1)。getDate()+1; 最後に、前の月または次の月をクリックして 1 を加算または減算し、カプセル化されたカレンダー機能を実行します。 完全なコード: <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> * { マージン: 0; パディング: 0; } 体 { 背景: #2c3e50; } .カレンダー{ 幅: 400ピクセル; マージン: 50px 自動; } .カレンダーヒント{ フォントサイズ: 16px; テキスト配置: 中央; 色: #fff; } .前へ { フロート: 左; カーソル: ポインタ; } 。次 { フロート: 右; カーソル: ポインタ; } .calendar-month { テキスト配置: 中央; マージン: 10px 0; 色: #fff; } ul { リストスタイル: なし; ディスプレイ: フレックス; } li { 幅: 57px; テキスト配置: 中央; 高さ: 55px; 行の高さ: 55px; フォントサイズ: 16px; 色: #fff; } .カレンダー日{ ディスプレイ: フレックス; } .calendar-day の範囲 { フレックス: 1; 色: #fff; テキスト配置: 中央; 高さ: 40px; 行の高さ: 40px; } .カレンダーデータ{ ディスプレイ: フレックス; flex-wrap: ラップ; } li { 幅: 57px; カーソル: ポインタ; } li:ホバー{ 背景: #2d3436; } .カレンダーデータ.on { 色: #d63031; } </スタイル> </head> <本文> <div class="カレンダー"> <div class="カレンダーヒント"> <span class="prev">前月</span> 2022年 <span class="next">来月</span> </div> <div class="calendar-month">5月</div> <div class="カレンダー日"> <span>日</span> <span>一</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> <ul class="カレンダーデータ"> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <スクリプト> var date = 新しい Date(); var year = document.querySelector("#year"); var 月 = document.querySelector(".calendar-month"); var カレンダーデータ = document.querySelector(".カレンダーデータ"); var prev = document.querySelector(".prev"); var next = document.querySelector(".next"); var monthArr = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; var y,m,day,d,html,今日; カレンダー(); 関数カレンダー() { y = date.getFullYear(); year.innerHTML = y + "年"; m = date.getMonth(); month.innerHTML = monthArr[m]; day = new Date(y, m, 1).getDay(); //各月の最初の日を取得します d = new Date(y, m + 1, -1).getDate() + 1; //日数を取得します html = ""; //各月の初日より前の時間を空に入力します for (var i = 0; i < day; i++) { html += "<li> </li>"; } (var j = 1; j <= d; j++) の場合 { if (y==新しい日付().getFullYear() && m==新しい日付().getMonth() && j==日付.getDate()) { html += "<li class='on'>" + j + "</li>"; } それ以外 { html += "<li>" + j + "</li>"; } } カレンダーデータ.innerHTML = html; } prev.onclick = 関数(){ date.setMonth(date.getMonth() - 1); カレンダー(); } next.onclick = 関数(){ date.setMonth(date.getMonth() + 1); カレンダー(); } </スクリプト> </本文> </html> 効果: 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Google 翻訳ツール: 多言語ウェブサイトを素早く実装
これらの仕様は、下位互換性のあるドキュメントを Web 上で公開し、できるだけ幅広いユーザーがアクセ...
この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...
一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...
外部アクセスポートをランダムにマップする -P フラグを使用すると、Docker は 49000 か...
binlog は、すべての mysql dml 操作を記録するバイナリ ログ ファイルです。 bin...
1. 設定ファイルディレクトリを作成するcd /ホームディレクトリmkdir frp最終的なディレク...
Discuz! フォーラムにはバックグラウンドで多くの設定オプションがあり、これらの設定オプションを...
仮想マシンの IP アドレスを変更します。 次のインターフェイスに入り、サブネット IP を直接変更...
HTML5 と jQuery はアップロード前にローカル画像のプレビューを実装しており、その効果は...
まずエラーコードを見てみましょう。 html: <テーブルボーダー="1"...
この記事では、参考までに、ビデオアップロード機能を実現するためのVueの具体的なコードを紹介します。...
まず、Alibaba Cloud の公式チュートリアルをご覧ください。ファイルの説明: 1. 証明書...
目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...
目次JavaScript イベント:よく使用されるイベント:イベントアクション要約するJavaScr...
私はこのようなバグを典型的な「ハムレット」バグと呼んでいます。これは、「エラーメッセージは同じだが、...