jQuery ベースのカレンダー効果

この記事では、カレンダー効果を実現するためのjQueryの具体的なコードを例として紹介します。具体的な内容は次のとおりです。

/**
 * 2021/3/6
 * カレンダー
 */
 
/* 日数の前に y 年 m 月を取得
 */
関数 getBDays( y, m ) {
 戻り値 (新しい Date(y, m, 1).getDay());
}
 
/* y 年 m 月 合計日数を取得
 */
関数 getTDays( y, m ) {
 戻り値 (新しい Date(y, m + 1, -1).getDate() + 1);
}
 
/* y 年 m 月 最終日数を取得
 */
関数 getBMDays( y, m ) {
 戻り値 (新しい Date(y, m, -1).getDate() + 1);
}
 
関数Calendar(nowDate){
 // 年、月、日
 this.year = nowDate.getFullYear();
 this.month = nowDate.getMonth();
 this.day = nowDate.getDate();
 
 // 日前
 this.beforeDays = getBDays(this.year, this.month);
 // 現在の月の日数
 this.totalDays = getTDays(this.year, this.month);
 // 先月の日数
 this.lastDays = getBMDays(this.year, this.month);
 
 // 今すぐ保存日付
 this.nowY = nowDate.getFullYear();
 this.nowM = nowDate.getMonth();
}
 
Calendar.prototype.initCalendar = 関数() {
 // カレンダーIDを取得 
 calDiv = $("#Calendar").append("<table></table>"); とします。
 
 // カレンダーテーブルを取得
 calTable = $("#Calendar > table"); とします。
 
 // カレンダーテーブル tr を追加
 (n = 0; n < 8; n++ ) の場合 {
 calTable.append('<tr></tr>');
 }
 
 // カレンダーテーブルを取得 tr: ヘッダー
 calHeadTr = $("#Calendar > table > tr:first"); とします。
 
 // カレンダーテーブル tr th を追加
 (n = 0; n < 3; n++ ) の場合 {
 calHeadTr.append('<th></th>');
 }
 
 // インデックス > 0 tr を選択
 calBodyTr = $("#Calendar > table > tr:gt(0)"); とします。
 
 // カレンダーテーブルを追加 tr td
 (n = 0; n < 7; n++ ) の場合 {
 calBodyTr.append('<td></td>');
 }
}
 
Calendar.prototype.insertDate = function(calName) {
 // カレンダーテーブルを取得 tr td: ヘッダー
 calHeadTh = $("#Calendar > テーブル > tr:first > th");
 
 // ヘッダーの内容を変更する
 $(calHeadTh[0]).html("<a><</a>");
 $(calHeadTh[1]).html(`<a>${this.year}年${this.month + 1}月</a>`);
 $(calHeadTh[2]).html("<a>></a>");
 
 // ヘッダーにスタイルを追加
 $(calHeadTh[1]).attr({
 「コルスパン」: 5,
 「タイトル」: calName
 });
 
 // 曜日配列
 const calWeekArr = ['日', '月', '火', '水', '木', '金', '土'];
 
 // カレンダーテーブルを取得 tr td: 曜日
 calWeekTd = $("#Calendar > テーブル > tr:eq(1) > td");
 (n = 0; n < 7; n++ ) の場合 {
 $(calWeekTd[n]).html(`<a>${calWeekArr[n]}</a>`);
 }
 
 // カレンダーテーブルを取得 tr td : body
 calBodyTd = $("#Calendar > テーブル > tr:gt(1) > td");
 
 // 日の前に挿入
 (n = this.beforeDays - 1、lastDays = this.lastDays; とします。
 0以上;
 n--、lastDays--) {
 $(calBodyTd[n]).html(`<a>${lastDays}</a>`); 
 $(calBodyTd[n]).attr("クラス", "他の日");
 }
 // 現在の日を挿入
 (n = this.beforeDays、i = 1 とします。
  i <= this.totalDays; 
  i++、n++) {
 $(calBodyTd[n]).html(`<a>${i}</a>`);
 
 if (i == this.day && 
  (新しい日付(this.year, this.month, 1).getMonth() == this.nowM) &&
  (新しい日付(this.year, this.month, 1).getFullYear() == this.nowY)) {
 $(calBodyTd[n]).attr("クラス", "現在");
 }
 それ以外 {
 $(calBodyTd[n]).removeAttr("クラス", "今日");
 }
 }
 
 // 日後に挿入
 (n = this.beforeDays + this.totalDays、i = 1 とします。
 n < calBodyTd.length;
 n++、i++) {
 $(calBodyTd[n]).html(`<a>${i}</a>`);
 $(calBodyTd[n]).attr("クラス", "他の日");
 }
}
 
Calendar.prototype.update = function(newDate) {
 // 年、月、日
 this.year = newDate.getFullYear();
 this.month = newDate.getMonth();
 this.day = newDate.getDate();
 
 // 日前
 this.beforeDays = getBDays(this.year, this.month);
 // 現在の月の日数
 this.totalDays = getTDays(this.year, this.month);
 // 先月の日数
 this.lastDays = getBMDays(this.year, this.month);
}
 
関数initDate() {
 // Dateオブジェクトを作成する
 now = new Date();
 cal = new Calendar( now )とします。
 
 // 初期化して挿入
 cal.initCalendar();
 cal.insertDate( 'MyDate' );
 
 // th:first にクリックイベントを追加
 $("#カレンダー > テーブル > tr:first > th:first").click(function(){
 now.setMonth( now.getMonth() - 1 );
 cal.update(今);
 cal.insertDate( 'MyDate' );
 });                         
 
 // th:lastにクリックイベントを追加
 $("#カレンダー > テーブル > tr:first > th:last").click(function(){
 now.setMonth( now.getMonth() + 1 );
 cal.update(今);
 cal.insertDate( 'MyDate' );
 });
}
 
初期化日付();

html

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="utf-8" />
 <title>ドキュメント</title>
 <link href="css/dateCal.css" rel="スタイルシート" media="screen">
 </head>
 <本文>
 <div id="カレンダー"></div>
 <script src="js/jquery.js"></script>
 <script src="js/dateCal.js"></script>
 </本文>
</html>

CS: ...

#カレンダー{
 幅: 200ピクセル;
 パディング下部: 5px;
 ボックスシャドウ: 0 1px 3px #ccc;
 境界線: 1px 実線 #EDEDED;
}
 
#カレンダーテーブル{
 幅: 継承;
 テキスト配置: 中央;
 ユーザー選択: なし;
 フォントファミリ: "Comic Sans MS";
 境界線の折りたたみ: 折りたたみ;
 境界線の間隔: 0px;
}
 
#カレンダーテーブル tr th {
 背景: #f8f8f8;
 フォントサイズ: 12px;
}
 
#カレンダーテーブル tr:nth-child(2) {
 背景: #f8f8f8;
}
 
#カレンダーテーブル tr td {
 フォントサイズ: 10px;
}
 
#カレンダーテーブル tr td.now-day {
 色: 赤;
}
 
#カレンダーテーブル tr td.other-day {
 色: ライトグレー;
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: