Ideen und Code zur Implementierung des Kalenders in nativem JS
本篇文章给大家带来的内容是关于原生js实现日历的思路与代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。
demo效果:
实现日历的思路:
1、利用new Date()获取今天日期
2、判断今年是平年还是闰年,确定今年每个月有多少天
3、确定今天日期所在月的第一天是星期几
4、计算出日历的行数
5、利用今天日期所在月的天数与该月第一天星期几来渲染日历表格
6、左右切换月份
源码:
html
<div class="calendar-container"> <div class="calendar-header"> <div class="left btn"><</div> <div class="year"></div> <div class="right btn">></div> </div> <div class="calendar-body"> <div class="week-row"> <div class="week box">日</div> <div class="week box">一</div> <div class="week box">二</div> <div class="week box">三</div> <div class="week box">四</div> <div class="week box">五</div> <div class="week box">六</div> </div> <div class="day-rows"> <!--日期的渲染的地方--> </div> </div> </div>
css
.calendar-container{ width: calc(31px*7 + 1px); } .calendar-header{ display: flex; justify-content: space-between; } .year{ text-align: center; line-height: 30px; } .btn{ width: 30px; height: 30px; text-align: center; line-height: 30px; cursor: pointer; } .calendar-body{ border-right: 1px solid #9e9e9e; border-bottom: 1px solid #9e9e9e; } .week-row, .day-rows, .day-row{ overflow: hidden; } .box{ float: left; width: 30px; height: 30px; border-top: 1px solid #9e9e9e; border-left: 1px solid #9e9e9e; text-align: center; line-height: 30px; } .week{ background: #00bcd4; } .day{ background: #ffeb3b; } .curday{ background: #ff5722; }
js
// 获取今天日期 let curTime = new Date(), curYear = curTime.getFullYear(), curMonth = curTime.getMonth(), curDate = curTime.getDate(); console.log(curTime, curYear, curMonth, curDate) // 判断平年还是闰年 function isLeapYear(year){ return (year%400 === 0) || ((year%4 === 0) && (year%100 !== 0)) } function render(curYear, curMonth){ document.querySelector('.year').innerHTML = `${curYear}年${curMonth + 1}月`; // 判断今年是平年还是闰年,并确定今年的每个月有多少天 let daysInMonth = [31, isLeapYear(curYear) ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // 确定今天日期所在月的第一天是星期几 let firstDayInMonth = new Date(curYear, curMonth, 1), firstDayWeek = firstDayInMonth.getDay(); // 根据当前月的天数和当前月第一天星期几来确定当前月的行数 let calendarRows = Math.ceil((firstDayWeek + daysInMonth[curMonth])/7); // 将每一行的日期放入到rows数组中 let rows = []; // 外循环渲染日历的每一行 for(let i = 0; i < calendarRows; i++){ rows[i] = `<p class="day-row">`; // 内循环渲染日历的每一天 for(let j = 0; j < 7; j++){ // 内外循环构成了一个calendarRows*7的表格,为当前月的每个表格设置idx索引; // 利用idx索引与当前月第一天星期几来确定当前月的日期 let idx = i*7 + j, date = idx - firstDayWeek + 1; // 过滤掉无效日期、渲染有效日期 if(date <= 0 || date > daysInMonth[curMonth]){ rows[i] += `<p class="day box"></p>` }else if(date === curDate){ rows[i] += `<p class="day box curday">${date}</p>` }else{ rows[i] += `<p class="day box">${date}</p>` } } rows[i] += `</p>` } let dateStr = rows.join(''); document.querySelector('.day-rows').innerHTML = dateStr; } // 首次调用render函数 render(curYear, curMonth); let leftBtn = document.querySelector('.left'), rightBtn = document.querySelector('.right'); // 向左切换月份 leftBtn.addEventListener('click', function(){ curMonth--; if(curMonth < 0){ curYear -= 1; curMonth = 11; } render(curYear, curMonth); }) // 向右切换月份 rightBtn.addEventListener('click', function(){ curMonth++; if(curMonth > 11){ curYear += 1; curMonth = 0; } render(curYear, curMonth); })
小结:
1、为了实现左右切换月份,将日历日期渲染代码放入到了render
函数,方便月份切换后重新渲染;
2、确定当前月的行数时,要结合当前月的天数与当前月第一天星期几来共同确定;
3、原生js日历中比较核心的就是如何确定每一天的日期,在这儿利用了内外循环,内外循环构成了一个calendarRows*7的表格,为当前月的每个表格设置idx索引;利用idx索引与当前月第一天星期几来确定当前月的日期;记得要过滤掉无效日期!!!
相关推荐:
Das obige ist der detaillierte Inhalt vonIdeen und Code zur Implementierung des Kalenders in nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

Ein wichtiges Tool zur Organisation Ihres Arbeits- und Arbeitsalltags in Windows 11 ist die Anzeige von Uhrzeit und Datum in der Taskleiste. Diese Funktion befindet sich normalerweise in der unteren rechten Ecke des Bildschirms und ermöglicht Ihnen den sofortigen Zugriff auf Uhrzeit und Datum. Durch Klicken auf diesen Bereich können Sie Ihren Kalender aufrufen und so die Überprüfung bevorstehender Termine und Termine erleichtern, ohne eine separate App öffnen zu müssen. Wenn Sie jedoch mehrere Monitore verwenden, können Probleme mit dieser Funktion auftreten. Während die Uhrzeit und das Datum auf allen angeschlossenen Monitoren in der Taskleiste angezeigt werden, ist die Möglichkeit, auf einem zweiten Monitor auf Datum und Uhrzeit zu klicken, um den Kalender anzuzeigen, nicht verfügbar. Derzeit funktioniert diese Funktion nur auf der Hauptanzeige – im Gegensatz zu Windows 10, wo auf eine beliebige Schaltfläche geklickt wird

Viele Benutzer möchten das Win10-Kalendertool verwenden, um die aktuelle Anzahl der Tage zu überprüfen, aber der Kalender zeigt diese Funktion nicht automatisch an. Tatsächlich müssen wir nur einfache Einstellungen vornehmen, um die kumulierte Anzahl der Wochen in diesem Jahr anzuzeigen Wochen Tutorial zur digitalen Einstellung: 1. Geben Sie in der Suche in der unteren linken Ecke des Desktops Kalender ein und öffnen Sie die Anwendung. 2. Klicken Sie in der geöffneten Kalenderanwendung auf das „Zahnrad“-Symbol in der unteren linken Ecke. Die Einstellungen werden rechts angezeigt. Wir klicken auf „Kalendereinstellungen“. 3. Fahren Sie in den geöffneten Kalendereinstellungen fort und suchen Sie nach „Wochennummer“. und dann die Woche ändern. Passen Sie einfach die Zahlenoption auf „der erste Tag des Jahres“ an. 4. Nachdem Sie die obigen Einstellungen vorgenommen haben, klicken Sie auf „Woche“, um die Wochenstatistiken für dieses Jahr anzuzeigen.

Der Kalender kann Benutzern dabei helfen, Ihren Zeitplan aufzuzeichnen und sogar Erinnerungen festzulegen. Viele Benutzer fragen sich jedoch, was zu tun ist, wenn in Windows 10 keine Erinnerungen an Kalenderereignisse angezeigt werden. Benutzer können zunächst den Windows-Update-Status überprüfen oder den Windows App Store-Cache leeren, um den Vorgang auszuführen. Lassen Sie diese Website den Benutzern die Analyse des Problems, dass die Kalenderereigniserinnerung in Win10 nicht angezeigt wird, sorgfältig vorstellen. Um Kalenderereignisse hinzuzufügen, klicken Sie im Systemmenü auf das Programm „Kalender“. Klicken Sie mit der linken Maustaste auf ein Datum im Kalender. Geben Sie im Bearbeitungsfenster den Namen des Ereignisses und die Erinnerungszeit ein und klicken Sie auf die Schaltfläche „Speichern“, um das Ereignis hinzuzufügen. Lösung des Problems, dass die Erinnerung an Win10-Kalenderereignisse nicht angezeigt wird

Wenn Ihr Outlook-Kalender nicht mit Google Kalender, Teams, iPhone, Android, Zoom, Office-Konto usw. synchronisiert werden kann, führen Sie bitte die folgenden Schritte aus, um das Problem zu beheben. Die Kalender-App kann mit anderen Kalenderdiensten wie Google Kalender, iPhone, Android, Microsoft Office 365 usw. verbunden werden. Dies ist sehr nützlich, da eine automatische Synchronisierung möglich ist. Was aber, wenn die Synchronisierung von OutlookCalendar mit Kalendern von Drittanbietern fehlschlägt? Mögliche Gründe hierfür könnten die Auswahl des falschen Kalenders für die Synchronisierung, ein nicht sichtbarer Kalender, Störungen in der Hintergrundanwendung, eine veraltete Outlook-Anwendung oder Kalenderanwendung usw. sein. Vorläufige Lösung für den Fehler, dass der Outlook-Kalender nicht synchronisiert wird

Es wurde bestätigt, dass das Lost Time-Einkaufsbüro am 28. Februar um 11 Uhr aktualisiert wird. Spieler können nach Taobao gehen, um nach dem Lost Time-Einkaufsbüro zu suchen und die Store-Kategorie zum Kauf auszuwählen. Dieses Mal präsentieren wir Ihnen die MBCC-Geburtstagsfeierserie und Peripheriegeräte für den Tischkalender 2024 kommen zusammen. Schauen Sie sich dieses Mal die Produktdetails an. Keine Zeit verloren Einkaufsbüro: Neue Kalender- und Geburtstagsserien-Peripheriegeräte! Es gibt etwas Neues im Lost Procurement Office! – Vorverkaufszeit: 28. Februar 2024, 11:00 Uhr – 13. März 2024, 23:59 Uhr. Kaufadresse: Taobao, suchen Sie nach [Unbestimmtes verlorenes Einkaufsbüro] und wählen Sie die Kategorie [Geschäft] aus, um das Geschäft zum Kauf von Peripheriegeräten zu betreten Einführung: Die neuen Peripheriegeräte, die dieses Mal veröffentlicht werden, sind MBCC-Geburtstagsfeierserien und 2024-Tischkalender-Peripheriegeräte. Klicken Sie bitte auf das lange Bild, um weitere Informationen zu erhalten. Das Einkaufsbüro stellt neue Peripheriegeräte vor – MBCC-Studenten

Einige Freunde, die das Win0-System verwenden, sind auf die Situation gestoßen, dass der Win10-Kalender nicht geöffnet werden kann. Dies ist nur ein normaler Computerfehler. Er kann in den Datenschutzeinstellungen des Win10-Systems behoben werden. Unten werfen wir einen Blick darauf. Lösung für das Problem, dass der Kalender in der unteren rechten Ecke von Win10 nicht geöffnet werden kann 1. Klicken Sie im Win10-System auf Start → Klicken Sie oben auf die Programmlistenschaltfläche → Suchen Sie nach Pinyin (Chinesisch) R → Kalender 2. Bei der ersten Verwendung , neue Termine dürfen nicht geöffnet werden (Maus Wenn Sie sich nach oben beugen, wird kein Dunkelblau ausgewählt), Sie können es auf Privatsphäre einstellen. Klicken Sie auf das Symbol mit den drei Balken in der oberen linken Ecke des Desktops → unten wird ein Einstellungsmenü angezeigt. 3. Klicken Sie in der Popup-Oberfläche auf „Datenschutz“. 4. Wenn Sie zuvor Einstellungen verwendet haben, können Sie auf klicken links

Wenn Ihr Windows 11-Computer die falsche Uhrzeit anzeigt, kann das viele Probleme verursachen und Sie sogar daran hindern, eine Verbindung zum Internet herzustellen. Tatsächlich verweigern einige Anwendungen das Öffnen oder Ausführen, wenn das System ein falsches Datum und eine falsche Uhrzeit anzeigt. Wie soll dieses Problem also gelöst werden? Werfen wir einen Blick nach unten! Methode 1: 1. Wir klicken zuerst mit der rechten Maustaste auf die leere Stelle der Taskleiste unten und wählen „Taskleisteneinstellungen“ aus. 2. Suchen Sie rechts in den Taskleisteneinstellungen nach „taskbarcorneroverflow3“, suchen Sie dann nach „Uhr“ oder „Uhr“ darüber und wählen Sie „Einschalten“. Methode 2: 1. Drücken Sie die Tastenkombination Win+R, um Ausführen aufzurufen, geben Sie regedit ein und drücken Sie zur Bestätigung die Eingabetaste. 2. Öffnen Sie den Registrierungseditor und suchen Sie darin HKEY

Win10 Calendar ist eine sehr einfach zu bedienende Software mit integrierter Kalenderfunktion, mit der wir jederzeit und überall das Datum überprüfen können. Bei Bedarf können wir auch den Mondkalender usw. einstellen und die aktuelle Woche überprüfen Es ist sehr praktisch. So richten Sie den Win10-Kalender ein: 1. Suchen Sie in der Menüoberfläche nach „Kalender“, um die Benutzeroberfläche aufzurufen. Wenn Sie aufgefordert werden, ein Konto zu verknüpfen, klicken Sie auf „Gehe zum Kalender“, um den Vorgang zu überspringen. 2. Klicken Sie auf die Schaltfläche „Zahnrad“ in der unteren linken Ecke. Die Einstellungsoberfläche wird automatisch rechts angezeigt und wir können sie einrichten. Häufig gestellte Fragen zum Win10-Kalender Wo stellt man den Kalender auf Chinesisch ein? So platzieren Sie den Kalender auf dem Desktop, um die Wochennummer anzuzeigen Kalender Personalisierte Einstellungen Einstellungen Sonntag
