Die vorherigen Wörter
Einfacher Kalender ist eine gemeinsame Anwendung von Datumsobjekten in JavaScript und verfügt über eine Vielzahl von Verwendungsmöglichkeiten. In diesem Artikel wird die Implementierungsideen einfacher Kalender ausführlich erläutert.
Effektdemonstration
Html Beschreibung
Verwenden Sie die beiden Eingänge von Typ = Nummer = als Eingangssteuerung für Jahr bzw. Monat, sodass die Einstellungstaste im erweiterten Browser enthalten ist
Vereinbaren Sie die Woche von Sonntag bis Montag in Ordnung
<div> <Header class = 'control'> <Eingabe id = "conyear" type = "number" min = "1900" max = "2100" step = "1"/> <Eingabe id = "conmonth" type = "number" min = "1" max = "12" Step = "1"/> </hace> <div> <div> <div> <div> <lader. <div>Tue</div> <div>Thursday</div> <div>Friday</div> <div>Saturday</div> </header> <section id='dayBox'> <div id="day1">1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div>16</div> <div>17</div> <div>18</div> <div>19</div> <div>20</div> <div>21</div> <div>22</div> <div>23</div> <div>24</div> <div>25</div> <div>26</div> <div>27</div> <div>28</div> <div>29</div> <div id="day30">30</div> <div id="day31">31</div> </section> </div> </div> </div>
CSS Beschreibung
Bestimmen Sie für die Implementierung eines einfachen Kalenders zunächst die Anordnung der Divs von Class = "Day" im Kalender, um schwebend zu sein. Dies ermöglicht es allen Divs derselben Ebene, der Bewegung zu folgen, indem die Position der Divs des ersten Tages geändert wird.
Body {Margin: 0;} Eingabe {Border: Keine; Polsterung: 0;}. Box {Breite: 354px; Rand: 30px Auto 0; } .DateBox {Höhe: 300px; Grenze: 2PX Solid Black;} .Week {Überlauf: versteckt; Grenzboden: 1PX Solid Black; Zeilenhöhe: 49px;}. Woche für {Höhe: 49px; float: links; Breite: 50px; Text-Align: Mitte;}. Daybox {Überlauf: versteckt;}. Tag {float: links; Höhe: 50px; Breite: 50px; Schriftart: 20px/50px 'Microsoft Yahei'; Text-Align: Mitte;}. Steuerung {Überlauf: versteckt;}. con-in {Höhe: 50px; float: links; Breite: 100px; Text-Align: Mitte; Schriftart: 20px/50px "Microsoft Yahei";}JS Beschreibung
Für die JS -Logik einfacher Kalender sind insgesamt 5 Implementierungen erforderlich:
【1】 Sie müssen die Anzahl der Tage des Monats erhalten und an welchem Tag des ersten Tages, der 30. Tag und des 31. Tages die Woche ist
【2】 Ändern Sie nach der Woche des ersten Tages des Monats den Margen-Links-Wert des ersten Tages und bewegen Sie den ersten Tag in die entsprechende Position. Aufgrund der schwebenden Beziehung bewegen sich der Rest der Tage ebenfalls in die entsprechende Position.
【3】 zusätzliche Tage nach der Anzahl der Tage im Monat ausblenden; Natürlich sollten die Tage, die in anderen Monaten verborgen werden können, vor dem Verstecken angezeigt werden.
[4] Wenn der 30. des Monats Sonntag ist, wird eine neue Linie besetzt. Zu diesem Zeitpunkt wird der Margenwert des 30. Tags in die erste Zeile verschoben (wenn der 31. Tag eine neue Linie einnehmen kann, wird eine ähnliche Behandlung durchgeführt).
【5】 Erhalten Sie nach dem Laden der Seite das laufende Jahr und Monat, um den Kalender des aktuellen Monats anzuzeigen. Wenn Sie das Jahr oder Monat ändern, erhalten Sie den geänderten Wert und aktualisieren Sie den Kalender
// Vorbereitung: Holen Sie sich die aktuelle Style -Funktion getCss (obj, style) {if (window.getComputedStyle) {return getComputedStyle (obj) [style]; } return obj.currentStyle [style];} // Implementierung 1: Holen Sie sich die Anzahl der Tage des Monats und den Tag der Woche am ersten Tag, 30. und 31. des Monatsfunktion get_data (Jahr, Monat) {var result = {}; var d = neues Datum (); // Wenn es Februar ist, wenn (Monat == 2) {// Wenn es sich um ein Schaltjahr handelt, wenn ((Jahr % 4 ==== 0 && Jahr % 100! == 0) || Jahr % 400 === 0) {result.days = 29; // Wenn es ein allgemeines Jahr ist} else {result.days = 28; } // Wenn es das 4., 6., 9. und November ist} else if (Monat == 4 || Monat == 6 || monat == 9 || monat == 11) {result.days = 30; } else {result.days = 31; // Der 31. Tag des Monats ist das Week-Ergebnis. } // Der erste Tag des Monats ist das Week-Ergebnis. if (monat! = 2) {// Der 30. Tag des Monats ist das Week-Ergebnis. } Rückgabeergebnis;} // Implementierung 2: Setzen Sie nach der Woche x des ersten Tages des Monats die Randlinks des ersten Tages = Breite *X so, dass es der richtigen Woche der Position für Positionsfunktion Move_day1 (Jahr, Monat) {var woche1 = get_data (Jahr, Monat) .Day1Week; Tag1.Style.Marginleft = Woche1%7*ParseInt (GetCSS (Tag1, 'Breite')+ 'PX';} // Implementierung 3: Verstecke die Anzahl der zusätzlichen Tage gemäß der Anzahl der Tage im Monat. Natürlich müssen wir zunächst die Anzahl der in anderen Monaten versteckten Funktionen für die Funktion hide_days (Jahr, Monat) anweisen. } // Die Anzahl der Tage überschüssig ausblenden Var Days = get_data (Jahr, Monat). für (var i = tays; i <31; i ++) {Daybox.Children [i] .Style.display = 'none'; }}; // Implementierung 4: Wenn der 30. oder 31. des Monats Sonntag ist, wird eine neue Reihe besetzt. Bewegen Sie den neu besetzten Tag in die erste Reihe, indem Sie die Margin-Top-Funktion bewegt. Tag31.Style.Margintop = ParseInt (getCss (Tag31, 'Höhe')) *(-5) + 'px'; Tag31.Style.Margintop = ParseInt (getCss (Tag31, 'Höhe')) *(-5) + 'px'; Tag31.Style.Marginleft = getCss (Tag31, 'Breite'); zurückkehren; } else {Tag30.Style.Margintop = Day31.Style.Margintop = Day31.Style.Marginleft = '0'; } // Wenn der 31. des Monats Sonntag ist, wenn (get_data (Jahr, Monat) .Day31Week === 0) {Tag31.Style.Margintop = ParseInt (getCss (Tag31, 'Höhe') *(-5) + 'Px'; } else {Tag31.Style.Margintop = '0'; }} // Implementierung 5: Wenn Sie die Seite geladen haben, erhalten Sie den aktuellen Jahr und den aktuellen Monat, den aktuellen Monatskalender. Wenn Sie das Jahr oder Monat ändern, erhalten Sie das geänderte Jahr und der Monat Kalender var Jahr = conyear Conyear.Value; var monat = conmonth.Value; if (Jahr <1900 || Jahr> 2100) {Jahr = conyear.Value = new Date (). GetFlURear (); } if (monat <1 || monat> 12) {monon = conmonth.Value = new Date (). getMonth () + 1; } move_day1 (Jahr, Monat); hide_days (Jahr, Monat); Move_day30 (Jahr, Monat);}Quellcode Demonstration
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.