Kalenderanzeige, Auswahl usw. werden an vielen Stellen auf der Webseite verwendet. Dieser Artikel verwendet HTML, CSS und JavaScript, um einen einfachen Kalender zu implementieren. Nach Abschluss ähnelt der Effekt dem Effekt auf der linken Seite. Sie können zum Vormonat oder im nächsten Monat wechseln. Es kann auch gemäß den tatsächlichen Bedingungen erweitert werden.
html
Der HTML -Teil ist relativ einfach, deklariert eine DIV, und das spezifische HTML wird mit JavaScript generiert. Der Gesamtinhalt ist ungefähr so:
<!doctype html><html><head> <meta charset='utf-8'> <link rel='stylesheet' href='External css file path' /> <title>demo</title></head><body> <div class='calendar' id='calendar'></div> <script type='text/javascript' src='External JavaScript -Dateipfad '> </script> </body> </html>
CSS
/*Gesamteinstellungen*/*{Margin: 0px; Padding: 0px;}/***Setzen Sie die Größe des Kalenders*/. Kalender {Breite: 240px; Höhe: 400px; Anzeige: Block;}/*** Setzen Sie das obere Feld des Kalenders*/. Calendar .Calendar-Title-Box {Position: Relativ; Breite: 100%; Höhe: 36px; Zeilenhöhe: 36px; Text-Align: Mitte; Border-Bottom: 1PX Solid #ddd;}/*** Setzen Sie das Schaltfläche für den letzten Monat*/. Kalender .Prev-Monats {Position: absolut; Top: 12px; links: 0px; Anzeige: Inline-Block; Breite: 0px; Höhe: 0px; Border-Links: 0px; Grenze: 6px fest transparent; Grenzrechte: 8PX Solid #999; Grenzboden: 6px fest transparent; Cursor: Zeiger;}/*** Setzen Sie das Schaltflächensymbol des nächsten Monats*/. Kalender .Next-Montag {Position: absolut; Top: 12px; Rechts: 0px; Anzeige: Inline-Block; Breite: 0px; Höhe: 0px; Grenzrechte: 0px; Grenze: 6px fest transparent; Border-Links: 8PX Solid #999; Grenzboden: 6px fest transparent; Cursor: Zeiger;}/* Kalendertabellenstil*/. Kalendertabelle {Breite: 100%; Grenzkollapse: Zusammenbruch; text-align: center;}/* tabellinienhöhe*/. Kalendertabelle Tr {Höhe: 30px; Zeilenhöhe: 30px;}/* Colour Color Color Special Display*/. Currentday {Farbe: rot;}/* Die Textfarbe dieses Monats*/. CurrentMonth {Farbe: #999;}/* Weitere Monatsfarben*/. othermonth {color: #ede;}Es gibt im Grunde nichts zu sagen über Stileinstellungen, einige einfache Einstellungen. Zum Beispiel ist das Special das Symbol, das "letzten Monat" und "nächsten Monat" darstellt, das die absolute Positionierung annimmt und das Grenzattribut in CSS verwendet, um Stile festzulegen.
JavaScript -Datumsobjekt
Bevor Sie mit dem formalen JS -Code beginnen, müssen Sie das Datumsobjekt in JS verstehen. Durch das Datumsobjekt können Sie Informationen wie Jahr, Monat, Tag, Zeit und Zeitstempel erhalten. Für eine bestimmte Referenz: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = neues Datum (); // Erhalten Sie die aktuelle Systemzeit. Meine aktuelle Zeit ist Montag, 25. April 2016 D1.Getinging (); // Die jährlichen Informationen erhalten, 2016 d1.getMonth (); // Die monatlichen Informationen (ab 0: 0-11) 3 d1.getDate () erhalten; // Erhalten Sie die Tagesinformationen hier das Ergebnis: 25 d1.getday (); // Erhalten Sie die wöchentlichen Informationen (0-6) hier das Ergebnis: 1
Sie können auch die Informationen zum Jahr, Monat und Datum direkt während der Initialisierung festlegen
# SET 15. März 2016 VAR D2 = NEUES DATUM (2016, 2, 15); // Monate werden von 0 gezählt, und Sie müssen einen d2.Getinging () subtrahieren; // 2016 D2.getMonth (); // 2 d2.getDate (); // 15 d2.tolocaledateString (); // "2016/3/15" beweist, dass die Einstellungen korrekt sind
Der Kalender umfasst Probleme wie die Anzahl der Tage im Monat. Es ist sehr einfach in JS. Wenn das Jahr, der Monat und der Tag festgelegt sind, berechnet JS den nächsten Monat automatisch. Zum Beispiel hat April nur 30 Tage. Wenn es auf 31 gesetzt ist, berechnet der erhaltene Datumstyp automatisch den 1. Mai. Wenn es auf 0 gesetzt ist, wird JS es als 30. April verarbeiten, dann ist Mai-1 29. April.
var d3 = neues Datum (2016, 3, 30); D3.TolocaledateString (); // "2016/4/30" var d4 = neues Datum (2016, 3, 31); d4.tolocaledateString (); // "2016/5/1" var d5 = neues Datum (2016, 3, 33); D5.TolocaledateString (); // "2016/5/3" var d6 = neues Datum (2016, 4, 1); d6.tolocaledateString (); // "2016/5/1" var d7 = neues Datum (2016, 4, 0); d7.tolocaledateString (); // "2016/4/30" var d8 = neues Datum (2016, 4, -3); D8.TolocaledATestring (); // "2016/4/27"
JavaScript
Nach dem Verständnis der grundlegenden Verwendung von Datumsobjekten in JS ist der nächste Schritt der Code -Implementierungsteil. Die Gesamtidee lautet wie folgt: Definieren Sie eine globale DateOBJ -Variable, um die in der Tabelle angezeigten Jahres- und Monatsinformationen aufzuzeichnen. Der Inhalt des Titels wird basierend auf DateOBJ aufgenommen. Das Datum in der Tabelle enthält alle Informationen von Nr. 1, die dem Jahr und Monat in DateOBJ entspricht, und bestimmt dann die Position Nr. 1 in der ersten Zeile der Tabelle, um die Daten der letzten Tage des Vormonats umzukehren, und die Daten dieses Monats und des nächsten Monats werden zurückgedrängt.
Spezifische Schritte:
1. Deklarieren Sie die DateObJ
2. Rendern HTML -Elemente im Kalender div
3. Erhalten Sie die Informationen zum 1. des Monats bis DATEOBJ und verwenden Sie sie, um alle Daten in der Tabelle zu durchqueren.
4. Binden Sie Ereignisse für Ikonen für den Vormonat und im nächsten Monat
(function () { /** verwendet zur Aufzeichnung von Daten. Wenn angezeigt wird, wird es gemäß dem Jahr und Monat des Datums in DateObj* / var dateObj = (function () {var _date = new Date (); // Standard ist die aktuelle Systemzeitrückgabe {getDate: function () {_date; _date; }) (); document.createelement ("div"); class = 'calendar-title' id = 'CalendArtitle'> </span> " +" <span id = 'nextMonth' class = 'next-month'> </span> "; calendar.appendChild (titleBox); // add to calendar div // die html-Struktur der Tabellen-Gebiets-Bodybox = 'Calendar =' Calendar 'Calendar =' Calendar 'Calendar =' Calendar 'calendar» calendar »calendar» calendar »calendar» calendar »calendar-» calendar-»calendar-» calendar feur add add. "<Th> Tag </th>" + "<Th> ein </th>" + "<Th> zwei </th>" + "<Th> drei </th>" + "<Th> Vier </th>" + "<Th> Five </th>" + "<Th> Sechs </th>" + "</tr> monathtm. sind in einem Monat für (var i = 0; i <6; i ++) {_bodyhtml + = "<tr>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + " +" <td> </td> "</td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> "<td> </td>" + "<td> </td>" + "<td> </td>" + "</tr>"; Calendar.AppendChild (BodyBox); Informationen in der Top -Titelleiste var Calendartitle = Dokument var _tds = _table.getElementsByTagName ("td"); _firstday.getday ()); getDateStre (New Date ()) {// Current Day_tds [i] .ClassName = 'Currentday'; Monate_tds [i] .ClassName = 'othermonth'; 'click', tonextmonth); Funktion (e) {func (e); Date.GeMonth () - 1, 1)); In eine Zeichenfolge, 4-Bit-Jahr + 2-Bit + 2-Bit = (_d> 9)?In diesem Beispiel wird das Ereignis beim Klicken auf das Datum in der Tabelle nicht hinzugefügt. Sie können der BindEvent -Funktion den folgenden Code hinzufügen, um die Informationen zum Klick -Datum zu erhalten.
var table = document.getElementById ("kalendartierbar"); var tds = table.getElementsByTagName ('td'); für (var i = 0; i <tds.Length; i ++) {addEvent (tds [i], 'click', function (e) {console.log (E. Target.Get.Get.GetRibute ('Data').Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.