Vor kurzem habe ich mir einige Funktionen über JS -Daten angesehen und plötzlich an die Kalenderkontrolle gedacht. Also habe ich versucht, einen zu schreiben. Als Hintergrundprogrammierer bin ich auf meinem Niveau begrenzt. Schauen wir uns eine Lerneinstellung an und werfen Sie einen Blick auf das Beispiel, das ich geschrieben habe. Lassen Sie uns zusammen lernen, um Fortschritte zu machen!
Erstens eine häufig verwendete Datumsfunktion:
Datum (Jahr, Monat, Tag)
var date = new Date ();
Jahr bekommen
var ye = this.date.getingfoyear ();
Holen Sie sich Monat, hier ist der monatliche Index, also benötigen Sie +1
var monat = this.date.getMonth ()+1;
Welcher Tag ist der Akquisitionsdatum?
var day = this.date.getDate ();
Holen Sie sich den Tag der Woche, kehren Sie 0 zurück. Sonntag 1. Montag, 2. Dienstag 3. Mittwoch. 4.. Donnerstag 5. Freitag 6. Samstag. Samstag
var week = this.date.getday ();
Holen Sie sich welchen Tag der Woche es in diesem Monat ist
var GetWeekday = Funktion (Jahr, Monat, Tag) {var date = neues Datum (Jahr, Monat, Tag); Rückgabedatum.getday (); } var weekStart = GetWeekday (this.year, this.month-1, 1)Holen Sie sich die Anzahl der Tage im Monat
var getMonthDays = Funktion (Jahr, Monat) {var date = neues Datum (Jahr, Monat, 0); Rückgabedatum.getDate (); } var monatays = this.getMonthdays (this.year, this.month);Okay, wir haben nur so viele Parameter verwendet. Das Folgende sind tatsächlich einige Operationen und Urteile über das Datum, das der Woche entspricht, dynamische Spleißetiketten. Lassen Sie uns direkt das Beispiel veröffentlichen, das ich geschrieben habe:
Reproduktionsbild:
<html> <meta http-äquiv = "content-type" content = "text/html; charSet = utf-8"> <head> <style type = "text/cs"> td {text-align: center;} </style> <script type = "text/javascript"> fown. this.init.apply (this, Argumente); } Calender.prototype = {init: function (container, option) {this.date = new Date (); this.year = this.date.getingfoyear (); this.onth = this.date.getMonth ()+1; this.day = this.date.getDate (); this.week = this.date.getay (); this.weekStart = this.getweekday (this.year, this.month-1, 1); this.monthdays = this.getMonthdays (this.year, this.month); this.containerDiv = document.getElementById (Container); this.options = options! Rückgabedatum.getDate (); }, GetWeekday: Funktion (Jahr, Monat, Tag) {var date = neues Datum (Jahr, Monat, Tag); Rückgabedatum.getday (); }, Ansicht: function () {var tabestESTR = '<table>'; tabafestr+= '<tr> <td colspan = "3"> </td> <td> Jahr:'+this.year+'</td> <td colspan = "3"> Monat:'+this.month+'</td> </tr>'; tableStr+= '<tr> <td> Tag </td> <td> zwei </td> <td> Four </td> <td> Five </td> <td> Six </td> </tr>'; var index = 1; // beurteilen, wo der erste Tag eines jeden Monats var style = '' ist; if (this.weekStart <7) {TableStr+= '<tr>'; für (var i = 0; i <this.weekStart; i ++) {TableStr+= '<td> </td>'; }; für (var i = 0; i <7-this.weekstart; i ++) {style = this.day == (i+1)? "Hintergrundfarbe: grün;": ""; Index ++; tababest+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>'; }; tab TableSt+= '</tr>'; } /// die Position, die den verbleibenden Tagen entspricht // die Ganzzahlzeile beurteilen und der entsprechenden Position var andays = this.monthdays- (7-This.Weekstart) entspricht; var row = math.floor (Bleidays%7 == 0? RESTAGES/7: ((RESTAGE/7) +1); var count = math.floor (Bleidays/7); für (var i = 0; i <count; i ++) {tischestrest+= '<tr>'; für (var k = 0; k <7; k ++) {style = this.day == (index+k)? "Hintergrundfarbe: grün;": ""; tabafestrest+= '<td style = "'+style+'" "val ='+(this.year+'-'+this.month+'-'+(index+k))+'>'; tischestrest+= index+k; tischestafel+= '</td>'; restcols = this.monthdays- (index-1); tuntertrust+= index; tab TableSt+= '</td>'; Index ++; }; tab TableSt+= '</tr>'; tab TableSt+= '</table>'; Tischtisch zurückgeben; }, Render: function () {var calendardiv = document.createelement ('div'); Calendardiv.style.border = this.options.border; calendardiv.style.width = this.options.width; calendardiv.style.height = this.options.height; Calendardiv.Style.cursor = 'Pointer'; calendardiv.style.backgroundColor = this.options.backgroundColor; // calendardiv.style.color = this.options.fontcolor; calendardiv.style.color = 'rot'; calendardiv.onclick = function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; if (Ziel && target.getAttribute ('val')) {alert (target.getAttribute ('val')); }} var tabestESTR = this.view (); this.tablestr = tabgleich; calendardiv.innerhtml = tab so; var div = document.createelement ('div'); div.style.width = 'auto'; Div.Style.Height = 'Auto'; Div.AppendChild (CalenderDiv); /// Seite drehen div var pagerdiv = document.createelement ('div'); pagerdiv.style.width = 'auto'; pagerdiv.style.height = 'auto'; var das = dies; /// Setzen Sie die Parameter var ResetPara = Funktion (Jahr, Monat, Tag) {that.date = New Datum (Jahr, Monat, Tag); that.year = that.date.getingfoyear (); that.onth = that.date.getMonth ()+1; that.day = that.date.getDate (); that.week = that.date.getay (); that.weekstart = that.getweekday (this.year, that.month-1, 1); that.monthdays = the.getMonthdays (this.year, this.month); } // vorherige Seite var preBtn = document.createelement ('Eingabe'); PREBTN.TYPE = 'Button'; PREBTN.VALUE = '<'; PREBTN.ONCLICK = FUNKTION () {this.containerDiv.removechild (div); ResetPara (das Jahr, das. Month-2, dieser Tag); that.render (); } // nächste Seite var nextBtn = document.createelement ('input'); NextBtn.Type = 'Button'; NextBtn.Value = '>'; NextBtn.onclick = function () {this.containerDiv.removechild (div); resetPara (das Jahr, den Month, diesen Tag); that.render (); } pagerDiv.AppendChild (preBTN); PagerDiv.AppendChild (NextBTN); Div.AppendChild (PagerDiv); var Dropdiv = document.createelement ('div'); var Dropdivstr = ''; // Jahr DropDivStr+= '<select id = "ddlyear">'; für (var i = 1900; i <= 2100; i ++) {DropDivStr+= i == that.year? '<Option Value = "'+i+'" Selected = "true">'+i+'</option>': '<Option Value = "+i+'"> '+i+' </option> '; }; DropDivStr+= '</select>'; // Month DropDivStr+= '<select id = "ddlmonth">'; für (var i = 1; i <= 12; i ++) {DropDivStr+= i == that.month? '<Option Value = "'+i+'" Selected = "true">'+i+'</option>': '<Option Value = "+i+'"> '+i+' </option> '; }; DropDivStr+= '</select>'; dropdiv.innerhtml = DropDivstr; Div.AppendChild (Dropdiv); that.containerDiv.Appendchild (div); /// Binden Sie das Ereignis, das Jahr- und Monat -Var ddlchange = function () {var ddlyear = document.getElementById ('ddlyear') auswählt; var ddlmonth = document.getElementById ('ddlmonth'); var yedeIndex = ddlyear.selectedIndex; var Jahr = ddlyear.options [JahrIndex] .Value; var monatIndex = ddlmonth.selectedIndex; var monat = ddlmonth.options [mononIndex] .Value; that.containerDiv.removechild (div); ResetPara (Jahr, Monat 1, Tag); that.render (); } ddlyear.onchange = function () {ddlChange (); } ddlmonth.onchange = function () {ddlChange (); }}} var calendar = new Calender ('DVTest', {Border: '1px Solid Green', Width: '400px', Höhe: '200px', HintergrundColor: ''}); calendar.render (); } </script> </head> <body> <div id = "dvTest"> </div> </body> </html>Der Code wurde erneut geändert und die Tabelle der Ansicht wird durch eine DIV ersetzt, um das schreibgeschützte Problem von IEs TableSerhtml zu lösen. Zusätzlich werden Optionen für die Konfigurierbarkeit hinzugefügt.
Der obige Code hat eine einfache Erklärung und die Funktionen sind die grundlegendsten. Wenn Sie es ausführlich tun, können Sie es erweitern. Ich hoffe, dieser Artikel kann Ihnen Inspiration geben.