Ich wollte schon immer zuvor einen Kalender in JavaScript schreiben, aber weil ich überhaupt keine guten Ideen habe, habe ich ihn schon lange nicht probiert. Vor kurzem habe ich zufällig ein Beispiel für einen einfachen Kalender gesehen, der im Internet in JavaScript geschrieben wurde. Obwohl der Code nicht groß ist, erklärt er das Implementierungsprinzip des JS -Kalenders gut. Ich habe es auch versucht und viel gewonnen. Nachdem ich die grundlegenden Implementierungsprinzipien beherrscht habe, möchte ich weitere Funktionen hinzufügen und es frei spielen. Lassen Sie mich es zuerst hier teilen. Wenn Sie interessiert sind, können Sie es versuchen!
1. Problem der Tabelle Zeilenzahl
Da Sie die Datumstabelle anzeigen möchten, müssen Sie zunächst wissen, wie viele Zeilen und Spalten in dieser Tabelle vorhanden sind. Die Anzahl der Spalten wurde ermittelt, wobei insgesamt 7 Spalten vom Sonntag (die erste Kolumne im Kalender ist Sonntag) bis Samstag. Bevor Sie das Problem der Anzahl der Reihen lösen, müssen Sie zuerst wissen, welchen Tag des ersten Tages des Monats der erste Tag eines jeden Monats nicht von Sonntagen im Kalender beginnt. Es kann Freitag und Samstag sein, also muss der linke Teil des 1. durch einen leeren Tisch ersetzt werden. Wie viele leere Tische sollten stattdessen verwendet werden? Hier müssen wir die GetDay () -Methode verwenden, die eine Nummer im Array [0-6] zurückgibt, 0 repräsentiert Sonntag, 1 repräsentiert Montag, 2 repräsentiert Dienstag und so weiter. Wenn also der 1. eines Monats Freitag ist, werden 5 leere Formulare benötigt, um sie links zu ersetzen. Wenn es dann 31 Tage im Monat gibt, ist die letzte Anzahl von Zeilen zu finden:
var tr_nums = math.ceil ((5 + 31)/7);
Natürlich beträgt nicht jeden Monat 31 Tage, daher müssen wir ein Array von 12 Monaten erstellen. Jedes Element repräsentiert die Anzahl der Tage pro Monat. Februar ist jedoch etwas ganz Besonderes. Es gibt 29 Tage im Februar in einem Schaltjahr und nur 28 Tage im Februar in einem normalen Jahr. Bevor Sie ein Array erstellen, müssen Sie also eine Funktion erstellen, die JAHRE JAHRE selbst Sprung von sich selbst erstellen:
// Wenn das laufende Jahr um 4 teilbar sein kann, aber nicht um 100 teilbar sein kann oder um 400 teilbar sein kann, kann es als Schaltjahr, Rückgabe 1, bestimmt werden, ansonsten 0Funktion ISLeap (Jahr) {Rückgabejahr % 4 == 0? (Jahr % 100! = 0? 1: (Jahr % 400 == 0? 1: 0)): 0;}Dann erstellen wir eine Reihe von Monaten:
var Days_per_month = New Array (31, 28 + Isleap (Jahr), 31, 30, 31, 30, 31, 31, 30, 31);
Dies stellt sicher, dass die korrekte Anzahl von Tagen sowohl in gewöhnlichen als auch in den Sprung Jahren herausgenommen wird. Der folgende Code wird verwendet, um relevante Informationen für heute zu erhalten:
var Today = new Date (), // Erhalten Sie das aktuelle Datum y = heute Firstday = neues Datum (y, m, 1), // den ersten Tag des Monatstages von Week = Firstday.Getay (), // Richter den Tag der Woche (Rückkehr zu einem von [0-6], 0 repräsentiert Sonntag, 1 repräsentiert Montag und so an) Days_per_month = New Array (31, 28 + isleap (y).
Am Ende können Sie also die Anzahl der für den Monat erforderlichen Zeilen der Tabelle erhalten:
var str_nums = math.ceil ((Tagofweek + Days_per_month [m]) / 7); // Bestimmen Sie die Anzahl der für die Datumstabelle erforderlichen Zeilen
2. Drucken Sie einen Kalendertisch
Die Tabelle selbst ist ein zweidimensionales Array. Lassen Sie den für den Master herauskommen und führen Sie zwei Schleifen aus, um sie abzuschließen. Der Code ist wie folgt:
für (i = 0; i <str_nums; i += 1) {// Die erste Schicht für Loop erstellt TR -Tag -Dokument.Write ('<tr>'); für (k = 0; k <7; k ++) {// Die zweite Schicht für Schleife erstellt TD -Tag var idx = 7 * i+k; // Erstellen Sie den Index für jede Tabelle ab 0 var date = idx - Tagofweek + 1; // übereinstimmen am 1. des Monats mit der Woche // etwas anderes} document.write ('</tr>'); }3. Fügen Sie den vollständigen JS -Kalendercode bei
<Script> // Beurteilen Sie, ob das laufende Jahr ein Schaltjahr ist (es gibt 29 Tage im Februar des Schaltjahres und nur 28 Tage im Februar des normalen Jahres). (Jahr % 100! = 0? 1: (Jahr % 400 == 0? 1: 0)): 0; } var i, k, heute = new Date (), // das aktuelle Datum y = heute erhalten. Die Datumstabelle) Firstday = neues Datum (y, m, 1), // den ersten Tag des Monats TagofWeek = Firstday.Getay (), // Richten Sie den Tag der Woche (return eins in [0-6], 0 repräsentiert Sonntag, 1 repräsentiert Montag usw. usw. 31, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), // Erstellen Sie den Monat Array str_nums = math.ceil ((Dayofweek + Days_per_month [m]) /7); // Bestimmen Sie die Anzahl der für das Datumstabellendokument erforderlichen Zeilen. // Drucken Sie die erste Zeile der Tabelle (Anzeige der Woche) für (i = 0; i <str_nums; i += 1) {// Erstellen Sie ein Datumstischdokument.Write ('<tr>'); für (k = 0; k <7; k ++) {var idx = 7 * i+k; // Erstellen Sie einen Index für jede Tabelle ab 0 var date = idx - Tagofweek + 1; // übereinstimmen am 1. des Monats mit der Woche (Datum <= 0 || Datum> Days_per_month [m])? Datum = '': Datum = IDX - Tagofweek + 1; // Index ist weniger oder gleich 0 oder höher als der Maximalwert des Monats. Verwenden Sie eine leere Tabelle anstelle von Datum == D? document.write ('<td>' + Datum + '</td>'): document.write ('<td>' + Datum + '</td>'); // Highlight the Day} document.write ('</tr>'); } document.write ('</table>'); </script>Lassen Sie uns frei im CSS -Teil spielen. Die aktuelle Zeit ist der 2. Mai 2016, und die Renderings sind wie folgt:
Der obige Artikel "Die Auswirkung des einfachen Kalenders am Tag des Schreibens von JS" ist der Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.