カレンダーウィジェットのネイティブJS実装

/********************************
 * カレンダー スタイル対応テーブル* #date カレンダー ブロック* テーブル テーブル* th ヘッダー* td 本文* a.now 今月* a.non-arrival その他の月* a.day today* a.href リンク* #date_diglogs ダイアログを記憶****************************/
 
＃日付 {
 幅: 220ピクセル;
 パディング下部: 5px;
 ボックスシャドウ: 0 1px 3px #ccc;
 境界線: 1px 実線 #EDEDED;
}
 
#日付テーブル{
 幅: 継承;
 ユーザー選択: なし;
 フォントサイズ: 12px;
 境界線の折りたたみ: 折りたたみ;
 境界線の間隔: 0px;
}
 
#日付テーブル tr th {
 背景色: #f8f8f8;
 色: #5e5f63;
}
 
#日付テーブル tr:nth-of-type(2) th {
 フォントの太さ: 300;
}
 
#日付テーブル tr td {
 テキスト配置: 中央;
 フォントファミリ: "Comic Sans MS";
 パディング: 2px 0;
}
 
#日付テーブル tr td a {
 テキスト装飾: なし;
}
 
#日付テーブル tr td a.now {
 色: #757575;
}
 
#日付テーブル tr td a.day {
 背景: 中青;
 テキスト装飾: 下線;
 色: #fff;
}
 
#日付テーブル tr td a.href {
 境界線: 1px 実線 #ccc;
 遷移: すべて 1 線形;
}
 
#日付テーブル tr td a.href:hover {
 境界線: 1px 点線 #5E5F63;
 背景：ゴールド;
}
 
#日付テーブル tr td a.非到着 {
 色: #ccc;
} 
 
.date_diglogs {
 フォントサイズ: 10px;
 背景: #fff;
 パディング: 2px 5px;
 境界線の半径: 3px;
 ボックスシャドウ: 0 1px 3px #ccc;
 境界線: 1px 実線 #EDEDED;
 色: #757575;
}

/* 2021/2/26
 * 機能: カレンダーペンダント* 清遠妙山*/
 
関数 BlogDate(nowDate) {
 /* 変数データ */
 this.year = nowDate.getFullYear(); // 年を取得しますthis.month = nowDate.getMonth(); // 月を取得しますthis.day = nowDate.getDate(); // 今日が何曜日かを取得しますthis.week = new Date(this.year, this.month, 1).getDay(); // 各月の初めの空き日数を取得しますthis.days = new Date(this.year, this.month + 1, -1).getDate() + 1; // 合計日数を取得しますthis.last_month = new Date(this.year, this.month, -1).getDate() + 1; // 先月の日数を保存します/* 変更されていないデータ*/
 this.now_year = nowDate.getFullYear(); // 今年の年を保存します this.now_month = nowDate.getMonth(); // 今年の月を保存します }
 
BlogDate.prototype.createDate = 関数(名前) {
 // ブロックを取得してテーブルを作成します。let date_div = document.getElementById('date');
 date_table を document.createElement('table') とします。
 date_div.appendChild(date_table);
 
 // すべてのtrタグを作成します。let date_all_tr = new Array();
 (n = 0、n < 8、n++ とします) {
 date_all_tr[n] = document.createElement('tr');
 date_table.appendChild(date_all_tr[n]);
 }
 
 // head 番目のタグを作成します。let date_head_th = new Array();
 (n = 0; n < 3; n++ とします) {
 date_head_th[n] = document.createElement('th');
 date_all_tr[0].appendChild(date_head_th[n]);
 }
 
 // 特別な要素属性を設定する date_head_th[0].setAttribute('id', 'prev');
 date_head_th[1].setAttribute('colspan', '5');
 date_head_th[1].setAttribute('title', `${name}`);
 date_head_th[2].setAttribute('id', 'next');
 
 // 週番目のラベルを作成します。let date_week_th = new Array();
 (n = 0、n < 7、n++ とします) {
 date_week_th[n] = document.createElement('th');
 date_all_tr[1].appendChild(date_week_th[n]);
 }
 
 // タグ配列 body td を作成します。let date_body_td = new Array();
 date_body_td_a を新しい配列（）にします。
 
 // タグエンティティであるボディtdを作成する for (let n = 2, i = 0; n < 8; n++, i++) {
 日付本体td[i] = [];
 日付本体td_a[i] = [];
 
 (m = 0、m < 7、m++ とします) {
 date_body_td[i][m] = document.createElement('td');
 date_body_td_a[i][m] = document.createElement('a');
 date_body_td[i][m].appendChild(date_body_td_a[i][m]);
 date_all_tr[n].append(date_body_td[i][m]);
 }
 }
}
 
BlogDate.prototype.setBlogDate = function(newDate) {
 /* データを更新 */
 this.year = newDate.getFullYear(); // 年を取得しますthis.month = newDate.getMonth(); // 月を取得しますthis.day = newDate.getDate(); // 今日の日付を取得しますthis.week = new Date(this.year, this.month, 1).getDay(); // 各月の初めの空き日数を取得しますthis.days = new Date(this.year, this.month + 1, -1).getDate() + 1; // 合計日数を取得しますthis.last_month = new Date(this.year, this.month, -1).getDate() + 1; // 先月の日数を取得します}
 
BlogDate.prototype.updateTime = function(blogs_date) {
 // カレンダー オブジェクトを取得します。let date_div = document.getElementById('date');
 date_table = date_div.getElementsByTagName('table')[0] とします。
 
 // カレンダーヘッダー tr, th を作成
 date_head_tr = date_table.getElementsByTagName('tr')[0] とします。
 date_head_th = date_head_tr.getElementsByTagName('th'); とします。
 
 // ヘッダーデータを作成する let date_head_arr = [
 '<'、`${this.year} 年 ${this.month + 1} か月`、'>'
 ];
 
 // ヘッダーデータを更新 for (let n = 0; n < date_head_th.length; n++) {
 date_head_th[n].textContent = date_head_arr[n];
 }
 
 // 週の部分を作成する tr, th
 date_week_tr = date_table.getElementsByTagName('tr')[1] とします。
 date_week_th = date_week_tr.getElementsByTagName('th'); とします。
 
 // 週データを作成する let date_week_arr = [
 「日」、「月」、「火」、「水」、「木」、「金」、「土」
 ];
 
 // 週データを更新 for (let n = 0; n < date_week_th.length; n++) {
 date_week_th[n].textContent = date_week_arr[n];
 }
 
 // body td の a タグを取得します。let date_body_td_a = date_table.getElementsByTagName('a');
 
 // 他の月の日数を設定する（前）
 (n = this.week - 1、last_month = this.last_month、n >= 0、n--、last_month--) {
 date_body_td_a[n].textContent = 先月;
 date_body_td_a[n].setAttribute('class', '未到着');
 }
 
 // 現在の月の日数を設定します（現在）
 (n = this.week、i = 1、i <= this.days、n++、i++) {
 date_body_td_a[n].textContent = i;
 // 今月のこの日であれば、日のスタイルを設定し、そうでない場合は、現在のスタイルを設定します。if ((i == this.day) &&
 (新しい日付(this.year, this.month, 1).getMonth() == this.now_month) &&
 (新しい日付(this.year、this.month、1).getFullYear() == this.now_year)) {
 date_body_td_a[n].setAttribute('class', 'day');
 } それ以外 {
 date_body_td_a[n].setAttribute('class', 'now');
 }
 }
 
 // 他の月の日数を設定する（後ほど）
 (n = this.week + this.days、i = 1、n < date_body_td_a.length、n++、i++) {
 date_body_td_a[n].textContent = i;
 date_body_td_a[n].setAttribute('class', '未到着');
 }
 
 // リンク部分の日付データが同じ場合は、対応するスタイルを設定します for (let n = 0; n < date_body_td_a.length; n++) {
 (m = 0 とします; m < blogs_date.href_num; m++) {
 if ((this.year == blogs_date.href_year[m]) &&
 (今月 + 1 == blogs_date.href_month[m]) &&
 (n == blogs_date.href_day[m])) {
 date_body_td_a[n].setAttribute('href', blogs_date.href_url[m]);
 date_body_td_a[n].classList.add('href');
 date_body_td_a[n].setAttribute('target', '_blank');
 } それ以外 {
 // そうでない場合は、冗長な属性があるかどうかを判定します if (Boolean(date_body_td_a[n].getAttribute('target')) &&
 ブール値(date_body_td_a[n].getAttribute('href')) &&
 (date_body_td_a[n].getAttribute('class') == 'now' ||
 date_body_td_a[n].getAttribute('class') == '非到着')) {
 date_body_td_a[n].removeAttribute('href');
 date_body_td_a[n].removeAttribute('ターゲット');
 }
 }
 }
 }
}
 
関数initDate(
 // デフォルトのカレンダーパラメータテーブル blogs_date = {
 blogs_name: 'マイカレンダー',
 href_year: [2021],
 href_month: [2],
 href_day: [26],
 href_url: ['http://www.4399.com/'],
 href_prompt: ['これは私が書いたカレンダーウィジェットです'],
 href_dialog: 偽、
 href_num: 未定義
 }
）{
 // パラメータの長さは等しいか if ((blogs_date.href_day.length != blogs_date.href_month.length) ||
 (blogs_date.href_month.length != blogs_date.href_year.length) ||
 (blogs_date.href_year.length != blogs_date.href_url.length)) {
 console.info('カレンダーパラメータの長さが等しくありません');
 false を返します。
 }
 // パラメータの長さが同じ場合は対応する長さを設定します。そうでない場合は{
 blogs_date.href_num = blogs_date.href_day.length;
 }
 
 // カレンダーデータを作成する let timeDate = new Date();
 blogDate = new BlogDate(timeDate); とします。
 
 // カレンダーエンティティを作成します blogDate.createDate(blogs_date.blogs_name);
 blogDate.updateTime(blogs_date);
 
 // 前のイベントを追加 document.getElementById('prev').onclick = function() {
 timeDate.setMonth(timeDate.getMonth() - 1);
 blogDate.setBlogDate(timeDate);
 blogDate.updateTime(blogs_date);
 }
 
 // 次のイベントを追加 document.getElementById('next').onclick = function() {
 timeDate.setMonth(timeDate.getMonth() + 1);
 blogDate.setBlogDate(timeDate);
 blogDate.updateTime(blogs_date);
 }
 
 ダイアログを開きます(blogs_date);
 
 ブログデータを表示します(blogs_date、timeDate);
}
 
関数 showBlogsData(blogs_date, 現在) {
 (blogs_date に k を入れる) {
 console.info(`[${k}] : ${blogs_date[k]}`);
 }
 console.info(`BlogsDate Ok ${now}`);
}
 
関数 openDialogs(blogs_date) {
 // ダイアログを開くかどうかのスイッチ (blogs_date.href_dialog) {
 真の場合:
 hrefId = document.getElementsByClassName('href'); とします。
 (n = 0; n < hrefId.length; n++) の場合 {
 hrefId[n].onmouseover = function(e) {
 if (this.getAttribute('class') != 'now' &&
 this.getAttribute('class') != '非到着') {
 
 var e = e || window.event;
 
 x = e.clientX とします。
 y = e.clientY とします。
 
 prompt = blogs_date.href_prompt[n]とします。
 ダイアログを document.createElement('div') にします。
 
 ダイアログのクラスリストに「date_diglogs」を追加します。
 dialogs.textContent = プロンプト;
 dialogs.style.cssText = `位置: 絶対;
 左: ${x-20}px;
 上: ${y+20}px`;
 
 document.body.appendChild(ダイアログ);
 }
 }
 hrefId[n].onmouseout = 関数() {
 if (this.getAttribute('class') != 'now' &&
 this.getAttribute('class') != '非到着') {
 
 diglogs = document.getElementsByClassName('date_diglogs')[0] とします。
 document.body.removeChild(diglogs);
 }
 }
 }
 壊す;
 偽の場合:
 壊す;
 }
}

<!DOCTYPE html>
<html>
 <ヘッド>
 <メタ文字セット="utf-8">
 <title>日付 html</title>
 <link rel="スタイルシート" href="date.css" media="screen">
 </head>
 <本文>
 <h3>こんにちは</h3>
 <div id="日付"></div>
 <script src="date.js"></script>
 <スクリプト>
 initDate(blogs_date = {
 blogs_name : 'マイカレンダー',
 href_year : [2021, 2021], 
 href_月: [2, 2], 
 href_day : [27, 3], 
 href_url : ['http://www.4399.com/', 'http://www.baidu.com/'],
 href_prompt: [「今日は家族に会いに出かけなければならない」、「今日は早く寝なければならない」]、
 href_dialog: 真
 });
 </スクリプト>
 </本文>
</html>