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 0 Funktion 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, 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 über heute zu erhalten: var Today = New Date (), // das aktuelle Datum y = heute erhalten.GetingFoyear (), // das Jahr im Datum m = heute erhalten.getonth (), // den Monat im Datum des Datums (es sollte angemerkt werden, dass: Der Monat wird von 0 berechnet. Hervorhebung des Tags beim Erstellen der Datums Tabelle) Firstday = Neues Datum (y, m, 1), // Erhalten Sie den ersten Tag des Monats Tag der Woche. 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31), // Erstellen Sie das Monats -Array
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:
Das obige dreht sich alles um diesen Artikel. Ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.