Ich habe mich in letzter Zeit für Projekte beeilt. Das Projekt befindet sich jetzt endlich in einem stabilen Zustand, nur Überarbeitungen. Als Hintergrundprogrammierer bin ich sehr hart. Ich muss alles vom Web bis zur mobilen Oberfläche schreiben, was eine Menge Dinge ist. . . Ich habe diese zwei Tage endlich untätig. Ich sah mir einige Funktionen über JS -Daten an und dachte plötzlich an die Kalenderkontrolle. Also habe ich versucht, einen zu schreiben. Als Hintergrundprogrammierer bin ich auf meinem Niveau begrenzt. Nehmen wir eine Lerneinstellung und schauen wir uns das Beispiel an, das ich geschrieben habe. . .
Erstens eine häufig verwendete Datumsfunktion: Datum (Jahr, Monat, Tag)
Die Codekopie lautet wie folgt:
var date = new Date ();
Jahr bekommen
Die Codekopie lautet wie folgt:
var ye = this.date.getingfoyear ();
Holen Sie sich Monat, hier ist der monatliche Index, also benötigen Sie +1
Die Codekopie lautet wie folgt:
var monat = this.date.getMonth ()+1;
Welcher Tag ist der Akquisitionsdatum?
Die Codekopie lautet wie folgt:
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
Die Codekopie lautet wie folgt:
var week = this.date.getday ();
Holen Sie sich welchen Tag der Woche es in diesem Monat ist
Die Codekopie lautet wie folgt:
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
Die Codekopie lautet wie folgt:
var GetMonThdays = Funktion (Jahr, Monat) {
var Datum = neues Datum (Jahr, Monat, 0);
Rückgabedatum.getDate ();
}
var monatays
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:
Die Codekopie lautet wie folgt:
<html>
<meta http-äquiv = "content-type" content = "text/html; charset = utf-8">
<kopf>
<style type = "text/css">
td {text-align: center;}
</style>
<script type = "text/javaScript">
window.onload = function () {
var calender = function () {
this.init.apply (this, Argumente);
}
Calender.Prototype = {
Init: Funktion (Container, Optionen) {
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 = Optionen! = null? Optionen: {
Grenze: '1PX Solid Green',
Breite: '400px',
Höhe: '200px',
BackgroundColor: 'Lightgrey',
Fontcolor: 'Blau'
}
},
GetMonthays: Funktion (Jahr, Monat) {
var Datum = neues Datum (Jahr, Monat, 0);
Rückgabedatum.getDate ();
},
GetWeekday: Funktion (Jahr, Monat, Tag) {
var date = neues Datum (Jahr, Monat, Tag);
Rückgabedatum.getday ();
},
Ansicht: function () {
var tab TableStr = '<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> Ein </td> <td> zwei </td> <td> drei </td> <td> Five </tw </td> <td> sechs </td> </tr>';
var index = 1;
// beurteilen Sie, wo der erste Tag eines jeden Monats ist
var style = '';
if (this.weekstart <7)
{
tabsätze+= '<tr>';
für (var i = 0; i <this.weekstart; i ++) {
tababest+= '<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
// Richter Integer -Zeilen beurteilen und entsprechenden Positionen entsprechen
var burdays = this.monthdays- (7-This.Weekstart);
var row = math.floor (REHTSAYS%7 == 0? RETTAGES/7: ((RESTADS/7) +1));
var count = math.floor (Bleidays/7);
für (var i = 0; i <count; i ++) {
tabsätze+= '<tr>';
für (var k = 0; k <7; k ++) {
style = this.day == (index+k)? "Hintergrundfarbe: grün;": "";
tababest+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(index+k))+'>';
tischestrest+= index+k;
tab TableSt+= '</td>';
};
tab TableSt+= '</tr>';
Index+= 7;
};
// Die entsprechende Position der letzten verbleibenden Tage (kann die Tage einer Woche nicht füllen)
var remencols = this.monthdays- (index-1);
tabsätze+= '<tr>';
für (var i = 0; i <remencols; i ++) {
style = this.day == Index? "Hintergrundfarbe: grün;": "";
tababest+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(index))+'>';
tuntertrust+= index;
tab TableSt+= '</td>';
Index ++;
};
tab TableSt+= '</tr>';
tab TableSt+= '</table>';
Tischtisch zurückgeben;
},
Rendern: 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 tab TableStr = 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;
/// Parameter zurücksetzen
var ResetPara = Funktion (Jahr, Monat, Tag) {
that.date = neues 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 () {
that.containerDiv.removechild (div);
ResetPara (das Jahr, das. Month-2, dieser Tag);
that.render ();
}
// nächste Seite
var NextBtn = document.createelement ('Eingabe');
NextBtn.Type = 'Button';
NextBtn.Value = '>';
NextBtn.onclick = function () {
that.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 == das. Jahr
? '<option value = "'+i+'" Selected = "trued">'+i+'</option>' '
: '<option value = "'+i+'">'+i+'</option>';
};
DropDivStr+= '</select>';
// Monat auswählen
DropDivStr+= '<select id = "ddlmonth">';
für (var i = 1; i <= 12; i ++) {
Dropdivstr+=
i == that.month
? '<option value = "'+i+'" Selected = "trued">'+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 auswählt
var ddlchange = function () {
var ddlyear = document.getElementById ('ddlyear');
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', {
Grenze: '1PX Solid Green',
Breite: '400px',
Höhe: '200px',
BackgroundColor: ''
}
);
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 enthält eine einfache Erklärung, die Funktion ist die grundlegendste und wenn Sie ihn ausführlicher machen, können Sie sie erweitern.