Récemment, j'ai examiné certaines fonctions sur les dates de JS et j'ai soudainement pensé au contrôle du calendrier. J'ai donc essayé d'en écrire un. En tant que programmeur d'arrière-plan, je suis limité à mon niveau. Prenons une attitude d'apprentissage et jetons un œil à l'exemple que j'ai écrit. Apprenons ensemble pour faire des progrès!
Tout d'abord, une fonction de date couramment utilisée:
Date (année, mois, jour)
var date = new Date ();
Obtenir une année
var année = this.date.getlyar ();
Obtenez le mois, voici l'indice mensuel, vous avez donc besoin de +1
var mois = this.date.getmonth () + 1;
Quel jour est la date d'acquisition
var day = this.date.getDate ();
Obtenez le jour de la semaine, retour 0. Dimanche 1. Lundi 2. Mardi 3. Mercredi 4. Jeudi 5. Vendredi 6. Samedi
var semaine = this.date.getDay ();
Obtenez le jour de la semaine ce mois-ci
var getweekday = fonction (année, mois, jour) {var date = new Date (année, mois, jour); Retour Date.getDay (); } var weekStart = getweekday (this.year, this.month-1, 1)Obtenez le nombre de jours dans le mois
var getMonthdays = fonction (année, mois) {var date = new Date (année, mois, 0); return date.getDate (); } var le mois = this.getMonthdays (this.year, this.month);D'accord, nous n'avons utilisé que tant de paramètres. Ce qui suit est en fait quelques opérations et jugements sur la date correspondant à la semaine, les étiquettes d'épissage dynamiques. Postons directement l'exemple que j'ai écrit:
Image de reproduction:
<html> <meta http-equiv = "contenu-type" contenu = "text / html; charset = utf-8"> <éad> <style type = "text / css"> td {text-align: cent;} </ style> <script type = "text / javascrip this.init.apply (ceci, arguments); } Calender.prototype = {init: function (conteneur, options) {this.date = new Date (); this.year = this.date.getlyar (); this.month = this.date.getMonth () + 1; this.day = this.date.getDate (); this.week = this.date.getDay (); this.weekStart = this.getweekday (this.year, this.month-1, 1); this.monthdays = this.getmonthdays (this.year, this.month); this.ContainerDiv = document.getElementById (conteneur); this.options = options! = null? Options: {border: '1px solide vert', largeur: '400px', hauteur: '200px', backgroundColor: 'Lightgrey', Fontcolor: 'Blue'}}, Getmonthdays: fonction (année, mois) {Var Date = nouveau date (mois, mois, 0); return date.getDate (); }, getweekday: fonction (année, mois, jour) {var date = new Date (année, mois, jour); Retour Date.getDay (); }, View: function () {var Tablestr = '<Specd>'; TablestR + = '<Tr> <td ColSpan = "3"> </td> <td> Année:' + this.year + '</td> <td Colspan = "3"> mois:' + this.month + '</td> </tr>'; TablestR + = '<Tr> <Td> Day </td> <td> deux </td> <td> quatre </td> <td> cinq </td> <td> six </td> </tr>'; var index = 1; // juge où le premier jour de chaque mois est var style = ''; if (this.weekStart <7) {Tablestr + = '<tr>'; pour (var i = 0; i <this.weekStart; i ++) {Tablestr + = '<Td> </td>'; }; pour (var i = 0; i <7-this.weekStart; i ++) {style = this.day == (i + 1)? "Background-Color: Green;": ""; index ++; tablestr + = '<td style = "' + style + '" val =' + (this.year + '-' + this.month + '-' + (i + 1)) + '>' + (i + 1) + '</td>'; }; tablestr + = '</tr>'; } /// La position correspondant aux jours restants // juge la ligne entière et correspond à la position correspondante var reste = this.monthdays- (7-this.weekStart); var row = math.floor (demeurs de reste% 7 == 0? RESTAGE / 7: ((demeure / 7) +1)); Var Count = Math.floor (RESTINGS / 7); pour (var i = 0; i <count; i ++) {Tablestr + = '<tr>'; pour (var k = 0; k <7; k ++) {style = this.day == (index + k)? "Background-Color: vert;": ""; Tablestr + = '<td style = "' + style + '" "val =' + (this.year + '-' + this.month + '-' + (index + k)) + '>'; tablestr + = index + k; tablestr + = '</ td>';}; tablestr + = '</ tr>'; index + = 7;}; // la position correspondant aux derniers jours restants (les jours de respect (les jours de la semaine; restentcols = this.monthdays- (index-1); val = '+ (this.year +' - '+ this.month +' - '+ (index)) +'> '; tablestr + = index; tablestr + = '</td>'; index ++; }; tablestr + = '</tr>'; Tablestr + = '</ Table>'; RETOUR TRABLESTR; }, 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 = 'pointeur'; calendardiv.style.backgroundcolor = this.options.backgroundcolor; // calendardiv.style.color = this.options.fontcolor; calendardiv.style.color = 'red'; calendardiv.onclick = function (e) {var evt = e || window.event; var Target = evt.srcelement || evt.target; if (cible && cible.getAttribute ('Val')) {alert (cible.getAttribute ('Val')); }} var tablestr = this.view (); this.tablestr = tablestr; calendardiv.innerhtml = tablestr; var div = document.CreateElement ('div'); div.style.width = 'auto'; div.style.height = 'auto'; Div.ApendChild (CalenderDiv); /// Page Turn div var pagerdiv = document.createElement ('div'); pagerdiv.style.width = 'auto'; pagerdiv.style.height = 'auto'; var that = this; /// réinitialiser le paramètre var resetPara = fonction (année, mois, jour) {that.date = new Date (année, mois, jour); that.year = that.date.getlyear (); that.month = that.date.getmonth () + 1; that.day = that.date.getDate (); that.week = that.date.getDay (); that.weekstart = that.getweekday (that.year, that.month-1, 1); that.monthdays = that.getmonthdays (that.year, that.month); } // page précédente var prebtn = document.CreateElement ('entrée'); prebtn.type = 'bouton'; prebtn.value = '<'; prebtn.OnClick = function () {that.containerdiv.removechild (div); resetPara (ce.year, that.month-2, that.day); that.render (); } // page suivante var nextBtn = document.createElement ('entrée'); NextBtn.Type = 'Button'; NextBtn.Value = '>'; NextBtn.OnClick = function () {That.ContainerDiv.RemoveChild (div); resetPara (ce.year, that.month, that.day); that.render (); } pagerdiv.appendChild (prebtn); PagerDiv.ApendChild (NextBtn); Div.ApendChild (PagerDiv); var dropDiv = document.CreateElement ('div'); var dropdivstr = ''; // Sélectionner une année dropdivstr + = '<select id = "ddlyear">'; pour (var i = 1900; i <= 2100; i ++) {dropdivstr + = i == that.year? '<option value = "' + i + '" selected = "true">' + i + '</ option>': '<option value = "+ i +'"> '+ i +' </ option> '; }; dropdivstr + = '</lect>'; // Sélectionner le mois dropdivstr + = '<select id = "ddlmonth">'; pour (var i = 1; i <= 12; i ++) {dropdivstr + = i == that.month? '<option value = "' + i + '" selected = "true">' + i + '</ option>': '<option value = "' + i + '">' + i + '</ option>'; }; dropdivstr + = '</lect>'; dropdiv.innerhtml = dropdivstr; Div.ApendChild (DropDiv); that.ContainerDiv.ApendChild (div); /// lie l'événement qui sélectionne l'année et le mois var ddlchange = function () {var ddlyear = document.getElementById ('ddlyear'); var ddlmonth = document.getElementById ('ddlmonth'); var anneIndex = ddlyear.selectedIndex; var année = ddlyear.options [YearIndex] .Value; var MonthIndex = ddlmonth.selectedIndex; var mois = ddlmonth.options [MonthIndex] .Value; ce.ContainerDiv.removechild (div); ResetPara (année, mois-1, Th.Day); that.render (); } ddlyear.onchange = function () {ddlchange (); } ddlmonth.onchange = function () {ddlchange (); }}} var calendar = new Calender ('dvTest', {border: '1px solide vert', largeur: '400px', hauteur: '200px', backgroundColor: ''}); calendar.render (); } </ script> </ head> <body> <div id = "dvtest"> </div> </ody> </html>Le code a été modifié à nouveau et la table de la vue est remplacée par un div, afin de résoudre le problème en lecture seule de TableInnerHTML d'IE. De plus, des options sont ajoutées pour la configurabilité.
Le code ci-dessus a une explication simple et les fonctions sont les plus élémentaires. Si vous le faites en profondeur, vous pouvez l'étendre. J'espère que cet article pourra vous inspirer.