この記事では、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 翻訳ツール: 多言語ウェブサイトを素早く実装
目次1: https証明書を準備する2: nginx sslモジュールを準備する3: SSL証明書を...
複数行を超えるテキストをインターセプトするための HTML コードは次のとおりです。 HTML:コー...
目次成果を達成するsortablejs の紹介具体的な実装成果を達成する最初は、antdesign ...
まずデータ テーブルを作成しましょう。 使用テスト; テーブル「従業員」を作成します( emp_no...
目次charとvarcharの違いcharとvarcharの違い上記は、MySQL における cha...
目次概要1. 範囲エラー2. 参照エラー3. 構文エラー4. タイプエラー5. URIエラー6. 評...
このタグはHTML3.2の一部ではなく、MSIE3以降のカーネルでのみサポートされているため、IEカ...
サーバーへのファイルのアップロード、ソフトウェアのインストール、コマンドやスクリプトの実行、サービス...
エラーメッセージ:エラー 2002: ソケット '/tmp/mysql.sock' ...
Web ページのスタイル設定に関しては、プロジェクトで純粋な CSS または SCSS (および他...
Docker と Docker Machine の違いDocker はクライアント サーバー アーキ...
MySQL データベースの実行効率はプログラムの実行速度に大きな影響を与えます。データベースの効率的...
この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...
序文まず、TCP 接続を識別する方法を見てみましょう。システムは、(src_ip、src_port、...
目次序文Zookeeper サービスのオープンを検出情報を入手する接続テスト接続先修理計画参照する序...