Heim >Web-Frontend >js-Tutorial >Neuer Algorithmus für die Kalendersteuerung im JavaScript-Blog-Stil
Gebrauchsanweisung:
Das Programm ist relativ einfach und der Code enthält Anweisungen zur Verwendung.
Der erste Schritt besteht darin, einen Kalender zu instanziieren und die Parameter festzulegen.
Parameterbeschreibung:
Jahr: das anzuzeigende Jahr
Monat: der anzuzeigende Monat
SelectDay: Datum auswählen
onSelectDay: Trigger am ausgewählten Datum
onToday: Trigger am heutigen Datum
onFinish: Wird ausgelöst, nachdem der Kalender gezeichnet wurde
Im Allgemeinen wird SelectDay auf das ausgewählte Datum gesetzt und in onSelectDay wird eine Funktion festgelegt, um den Stil dieses Datums festzulegen,
Zum Beispiel , im Beispiel ist SelectDay auf today Der 10. des Monats und der Stil ist an diesem Tag auf onSelect eingestellt:
SelectDay: new Date().setDate(10), onSelectDay: function(o){ o.className = "onSelect"; },
Und onToday wird verwendet, um den Stil des heutigen Datums festzulegen,
Im Beispiel ist der Stil des heutigen Datums auf onToday eingestellt:
onToday: function(o){ o.className = "onToday" },
In onFinish können Sie das Programm einfügen Das muss den Kalender einstellen.
Mit this.Year und this.Month können Sie sich das Jahr und den Monat im aktuellen Kalender anzeigen lassen.
Hier werden auch die Termine mit Daten eingestellt. Im Beispiel gibt es beispielsweise eine Liste mit Terminen mit Daten im aktuellen Monat, und dann werden die entsprechenden Termine entsprechend dieser Liste eingestellt:
var flag = [10,15,20]; for(var i = 0, len = flag.length; i < len; i++){ this.Days[flag[i]].innerHTML = "<a href='javascript:void(0);' onclick=\"alert('日期是:"+this.Year+"/"+this.Month+"/"+flag[i]+"');return false;\">" + flag[i] + "</a>"; }
Beispiel: In tatsächlichen Anwendungen kann die entsprechende Datumsliste nach Jahr und Monat abgerufen werden.
Ich persönlich empfehle, sie über Ajax zu erhalten.
Es gibt auch zwei nützliche Methoden im Programm: PreMonth (zeigt den vorherigen Monat an) und NextMonth (zeigt den nächsten Monat an).
Testcode:
blog式日历控件_www.jb51.net_脚本之家 <<>>2008年 8月
日 一 二 三 四 五 六
Weitere Artikel zum neuen Algorithmus der Kalendersteuerung im JavaScript-Blog-Stil finden Sie auf der chinesischen PHP-Website!