Native Js-Implementierung des Kalender-Widgets

/*****************************
 * Entsprechende Tabelle im Kalenderstil* #Datum Kalenderblock* Tabelle Tabelle* th-Header* td-Text* a.jetzt in diesem Monat* a.Nichtankunft in anderen Monaten* a.Tag heute* a.href-Link* #Datum_diglogs Dialog merken****************************/
 
#Datum {
 Breite: 220px;
 Polsterung unten: 5px;
 Kastenschatten: 0 1px 3px #ccc;
 Rand: 1px durchgezogen #EDEDED;
}
 
#Datumstabelle {
 Breite: erben;
 Benutzerauswahl: keine;
 Schriftgröße: 12px;
 Rahmen-Zusammenbruch: Zusammenbruch;
 Rahmenabstand: 0px;
}
 
#Datumstabelle tr th {
 Hintergrundfarbe: #f8f8f8;
 Farbe: #5e5f63;
}
 
#Datumstabelle tr:n-ter-vom-Typ(2) th {
 Schriftstärke: 300;
}
 
#Datumstabelle tr td {
 Textausrichtung: zentriert;
 Schriftfamilie: „Comic Sans MS“;
 Polsterung: 2px 0;
}
 
#Datumstabelle tr td a {
 Textdekoration: keine;
}
 
#Datumstabelle tr td a.jetzt {
 Farbe: #757575;
}
 
#Datumstabelle tr td a.Tag {
 Hintergrund: mittelblau;
 Textdekoration: Unterstreichen;
 Farbe: #fff;
}
 
#Datumstabelle tr td a.href {
 Rand: 1px durchgezogen #ccc;
 Übergang: alles 1en linear;
}
 
#Datumstabelle tr td a.href:hover {
 Rand: 1px gepunktet #5E5F63;
 Hintergrund: Gold;
}
 
#Datumstabelle tr td a.Nichtankunft {
 Farbe: #ccc;
} 
 
.date_diglogs {
 Schriftgröße: 10px;
 Hintergrund: #fff;
 Polsterung: 2px 5px;
 Rahmenradius: 3px;
 Kastenschatten: 0 1px 3px #ccc;
 Rand: 1px durchgezogen #EDEDED;
 Farbe: #757575;
}

/* 26.02.2021
 * Funktion: Kalenderanhänger* Qingyuan Miaoshan*/
 
Funktion BlogDate(nowDate) {
 /* Variable Daten */
 this.year = nowDate.getFullYear(); // Jahr abrufenthis.month = nowDate.getMonth(); // Monat abrufenthis.day = nowDate.getDate(); // Abrufen, welcher Tag heute istthis.week = new Date(this.year, this.month, 1).getDay(); // Anzahl der freien Tage zu Beginn jedes Monats abrufenthis.days = new Date(this.year, this.month + 1, -1).getDate() + 1; // Gesamtzahl der Tage abrufenthis.last_month = new Date(this.year, this.month, -1).getDate() + 1; // Anzahl der Tage im letzten Monat speichern/* unveränderte Daten*/
 this.now_year = nowDate.getFullYear(); // Dieses Jahr speichern this.now_month = nowDate.getMonth(); // Dieses Jahr speichern }
 
BlogDate.prototype.createDate = Funktion(Name) {
 //Blöcke abrufen und Tabellen erstellen let date_div = document.getElementById('date');
 let date_table = document.createElement('Tabelle');
 date_div.appendChild(Datumstabelle);
 
 // Alle tr-Tags erstellen let date_all_tr = new Array();
 für (sei n = 0; n < 8; n++) {
 date_all_tr[n] = Dokument.createElement('tr');
 date_table.appendChild(date_all_tr[n]);
 }
 
 //Erstellen Sie das head-th-Tag let date_head_th = new Array();
 für (sei n = 0; n < 3; n++) {
 date_head_th[n] = document.createElement('th');
 date_all_tr[0].appendChild(date_head_th[n]);
 }
 
 // Spezielle Elementattribute festlegen date_head_th[0].setAttribute('id', 'prev');
 date_head_th[1].setAttribute('colspan', '5');
 date_head_th[1].setAttribute('Titel', `${name}`);
 date_head_th[2].setAttribute('id', 'nächstes');
 
 //Erstellen Sie das Label für die te Woche let date_week_th = new Array();
 für (sei n = 0; n < 7; n++) {
 date_week_th[n] = document.createElement('th');
 date_all_tr[1].appendChild(date_week_th[n]);
 }
 
 // Body td erstellen, ein Tag-Array let date_body_td = new Array();
 let date_body_td_a = neues Array();
 
 // Erstelle body td, eine Tag-Entität für (let n = 2, i = 0; n < 8; n++, i++) {
 Datumstext_td[i] = [];
 Datumstext_td_a[i] = [];
 
 für (sei m = 0; m < 7; m++) {
 date_body_td[i][m] = Dokument.createElement('td');
 date_body_td_a[i][m] = Dokument.createElement('a');
 Datumskörper_td[i][m].appendChild(Datumskörper_td_a[i][m]);
 date_all_tr[n].anhängen(date_body_td[i][m]);
 }
 }
}
 
BlogDate.prototype.setBlogDate = Funktion(neuesDatum) {
 /* Daten aktualisieren */
 this.year = newDate.getFullYear(); // Jahr abrufenthis.month = newDate.getMonth(); // Monat abrufenthis.day = newDate.getDate(); // Heutiges Datum abrufenthis.week = new Date(this.year, this.month, 1).getDay(); // Anzahl der freien Tage zu Beginn jedes Monats abrufenthis.days = new Date(this.year, this.month + 1, -1).getDate() + 1; // Gesamtzahl der Tage abrufenthis.last_month = new Date(this.year, this.month, -1).getDate() + 1; // Anzahl der Tage im letzten Monat abrufen}
 
BlogDate.prototype.updateTime = Funktion(blogs_date) {
 // Kalenderobjekt abrufen let date_div = document.getElementById('date');
 let date_table = date_div.getElementsByTagName('table')[0];
 
 // Kalenderkopfzeile erstellen tr, th
 let date_head_tr = date_table.getElementsByTagName('tr')[0];
 let date_head_th = date_head_tr.getElementsByTagName('th');
 
 // Headerdaten erstellen let date_head_arr = [
 '<', `${this.year} Jahr ${this.month + 1} Monat`, '>'
 ];
 
 // Header-Daten aktualisieren für (let n = 0; n < date_head_th.length; n++) {
 date_head_th[n].textInhalt = date_head_arr[n];
 }
 
 // Erstelle den Wochenteil tr, th
 let date_week_tr = date_table.getElementsByTagName('tr')[1];
 let date_week_th = date_week_tr.getElementsByTagName('th');
 
 // Wochendaten erstellen let date_week_arr = [
 „So“, „Mo“, „Di“, „Mi“, „Do“, „Fr“, „Sa“
 ];
 
 // Wochendaten aktualisieren für (let n = 0; n < date_week_th.length; n++) {
 date_week_th[n].textContent = date_week_arr[n];
 }
 
 // Holen Sie sich das A-Tag des Textkörpers td let date_body_td_a = date_table.getElementsByTagName('a');
 
 // Anzahl der Tage in anderen Monaten festlegen (vorne)
 für (lass n = diese.Woche - 1, letzter_Monat = dieser.letzter_Monat; n >= 0; n--, letzter_Monat--) {
 date_body_td_a[n].textContent = letzter_Monat;
 date_body_td_a[n].setAttribute('Klasse', 'Nichtankunft');
 }
 
 // Anzahl der Tage im aktuellen Monat festlegen (current)
 für (lass n = diese.Woche, i = 1; i <= diese.Tage; n++, i++) {
 date_body_td_a[n].textInhalt = i;
 // Wenn heute dieser Tag in diesem Monat ist, legen Sie den Tagesstil fest, andernfalls legen Sie den Jetzt-Stil fest, wenn ((i == this.day) &&
 (neues Datum (dieses Jahr, dieser Monat, 1) .getMonth () == dieser aktuelle Monat) &&
 (neues Datum(dieses.Jahr, dieser.Monat, 1).getFullYear() == dieses.jetzt_Jahr)) {
 date_body_td_a[n].setAttribute('Klasse', 'Tag');
 } anders {
 date_body_td_a[n].setAttribute('Klasse', 'jetzt');
 }
 }
 
 // Anzahl der Tage in anderen Monaten festlegen (später)
 für (sei n = diese.Woche + diese.Tage, i = 1; n < date_body_td_a.length; n++, i++) {
 date_body_td_a[n].textInhalt = i;
 date_body_td_a[n].setAttribute('Klasse', 'Nichtankunft');
 }
 
 // Wenn die Datumsdaten im Linkteil gleich sind, setze den entsprechenden Stil für (let n = 0; n < date_body_td_a.length; n++) {
 für (let m = 0; m < blogs_date.href_num; m++) {
 wenn ((this.year == blogs_date.href_year[m]) &&
 (dieser.Monat + 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('Ziel', '_blank');
 } anders {
 // Wenn nicht, ermitteln Sie, ob redundante Attribute vorhanden sind, wenn (Boolean (date_body_td_a[n].getAttribute ('target')) &&
 Boolean(Datumskörper_td_a[n].getAttribute('href')) &&
 (date_body_td_a[n].getAttribute('Klasse') == 'jetzt' ||
 date_body_td_a[n].getAttribute('Klasse') == 'Nichtankunft')) {
 date_body_td_a[n].removeAttribute('href');
 date_body_td_a[n].removeAttribute('Ziel');
 }
 }
 }
 }
}
 
Funktion initDate(
 // Standardkalenderparametertabelle blogs_date = {
 blogs_name: 'Mein Kalender',
 href_year: [2021],
 href_month: [2],
 href_day: [26],
 href_url: ['http://www.4399.com/'],
 href_prompt: ['Dies ist das Kalender-Widget, das ich geschrieben habe'],
 href_dialog: falsch,
 href_num: nicht definiert
 }
) {
 // Sind die Parameterlängen gleich, wenn ((blogs_date.href_day.length != blogs_date.href_month.length) ||
 (blogs_date.href_Monat.Länge != blogs_date.href_Jahr.Länge) ||
 (blogs_date.href_year.length != blogs_date.href_url.length)) {
 console.info('Die Längen der Kalenderparameter sind nicht gleich');
 gibt false zurück;
 }
 // Die Parameterlängen sind gleich, setze die entsprechende Länge, sonst {
 blogs_date.href_num = blogs_date.href_tag.länge;
 }
 
 // Kalenderdaten erstellen let timeDate = new Date();
 let blogDate = neues BlogDate(timeDate);
 
 // Kalenderentität erstellen blogDate.createDate(blogs_date.blogs_name);
 blogDate.updateTime(blogs_date);
 
 // Vorheriges Ereignis hinzufügen document.getElementById('prev').onclick = function() {
 timeDate.setMonth(timeDate.getMonth() - 1);
 blogDate.setBlogDate(timeDate);
 blogDate.updateTime(blogs_date);
 }
 
 // Nächstes Ereignis hinzufügen document.getElementById('next').onclick = function() {
 timeDate.setMonth(timeDate.getMonth() + 1);
 blogDate.setBlogDate(timeDate);
 blogDate.updateTime(blogs_date);
 }
 
 openDialogs(blogs_date);
 
 zeigeBlogsData(blogs_date, timeDate);
}
 
Funktion showBlogsData(blogs_date, now) {
 für (lass k in blogs_date) {
 Konsole.info(`[${k}] : ${blogs_date[k]}`);
 }
 console.info(`BlogsDate Ok ${now}`);
}
 
Funktion openDialogs(blogs_date) {
 // Ob der Dialogschalter geöffnet werden soll (blogs_date.href_dialog) {
 Fall wahr:
 let hrefId = document.getElementsByClassName('href');
 für (let n = 0; n < hrefId.length; n++) {
 hrefId[n].onmouseover = Funktion(e) {
 wenn (this.getAttribute('class') != 'jetzt' &&
 this.getAttribute('Klasse') != 'Nichtankunft') {
 
 var e = e || Fenster.Ereignis;
 
 sei x = e.clientX;
 sei y = e.clientY;
 
 let prompt = blogs_date.href_prompt[n];
 let Dialoge = Dokument.createElement('div');
 
 dialogs.classList.add('date_diglogs');
 dialogs.textContent = Eingabeaufforderung;
 dialogs.style.cssText = `Position: absolut;
 links: ${x-20}px;
 oben: ${y+20}px`;
 
 Dokument.Body.AppendChild(Dialoge);
 }
 }
 hrefId[n].onmouseout = Funktion() {
 wenn (this.getAttribute('class') != 'jetzt' &&
 this.getAttribute('Klasse') != 'Nichtankunft') {
 
 let diglogs = document.getElementsByClassName('date_diglogs')[0];
 Dokument.Body.RemoveChild(Diglogs);
 }
 }
 }
 brechen;
 Fall falsch:
 brechen;
 }
}

<!DOCTYPE html>
<html>
 <Kopf>
 <meta charset="utf-8">
 <Titel>Datum html</Titel>
 <link rel="stylesheet" href="date.css" media="bildschirm">
 </Kopf>
 <Text>
 <h3>Hallo</h3>
 <div id="Datum"></div>
 <script src="date.js"></script>
 <Skript>
 initDate(blogs_date = {
 blogs_name : 'Mein Kalender',
 href_year : [2021, 2021], 
 href_month : [2, 2], 
 href_day : [27, 3], 
 href_url: ['http://www.4399.com/', 'http://www.baidu.com/'],
 href_prompt: ['Ich muss heute raus, um meine Familie zu besuchen', 'Ich muss heute früh ins Bett'],
 href_dialog: wahr
 });
 </Skript>
 </body>
</html>