Les mots précédents
Le calendrier simple est une application courante des objets de date dans JavaScript et dispose d'un large éventail d'utilisations. Cet article expliquera en détail les idées de mise en œuvre de calendriers simples.
Démonstration d'effet
Description HTML
Utilisez les deux entrées de type = nombre comme contrôles d'entrée respectivement pour l'année et le mois, afin que le bouton de réglage soit inclus dans le navigateur avancé
Organiser la semaine en ordre du dimanche au lundi
<v> <en-tête class = 'Control'> <input id = "conyear" type = "nombre" min = "1900" max = "2100" Step = "1" /> <input id = "conmonth" type = "nombre" min = "1" max = "12" Step = "1" /> </ headr> <v> <headry class = 'Week> <v> Sunday </ Div> </ Div> <Div> </ div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> </ Div> <" <div> mar </div> <v> jeudi </div> <div> vendredi </div> <v> samedi </v> </diger> <section id = 'daybox'> <div id = "day1"> 1 </v> <v> 2 </v> <v> 3 </v> <v> 4 </v> <v> 5 </v> <v> 6 </v> <v> <v> <v> </v> </v> <Div> 6 </div> </ Div> </v> </ Div> </v> </v> <v> 6 </v> <div> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> <div> 18 </div> <v> 19 </v> <v> 20 </v> <v> 21 </ 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> </div>
Description CSS
Pour la mise en œuvre d'un calendrier simple, déterminez d'abord la disposition des divs de class = "day" dans le calendrier à flotter. Cela permet à tous les divs du même niveau de suivre le mouvement en modifiant la position des divs du premier jour.
corps {margin: 0;} entrée {border: aucun; rembourrage: 0;}. Box {largeur: 354px; marge: 30px auto 0; } .Datebox {hauteur: 300px; Border: 2px Solid Black;} .week {Overflow: Hidden; Border-Bottom: 1px noir solide; LINE-HEIGHT: 49px;}. Week-in {hauteur: 49px; flottant: à gauche; Largeur: 50px; Text-Align: Center;}. Daybox {Overflow: Hidden;}. Day {Float: Left; hauteur: 50px; Largeur: 50px; Police: 20px / 50px 'Microsoft Yahei'; Text-Align: Center;}. Control {Overflow: Hidden;}. Con-in {hauteur: 50px; flottant: à gauche; Largeur: 100px; Texte-aligne: Centre; Police: 20px / 50px "Microsoft Yahei";}Description JS
Un total de 5 implémentations sont requises pour la logique JS des calendriers simples:
【1】 Vous devez obtenir le nombre de jours du mois, et quel jour du premier jour, du 30e jour et du 31e jour est la semaine
【2】 Selon la semaine du premier jour du mois, modifiez la valeur de marge-gauche du premier jour et déplacez le premier jour vers la position correspondante; En raison de la relation flottante, le reste des jours passera également à la position correspondante.
【3】 Cachez des jours supplémentaires en fonction du nombre de jours dans le mois; Bien sûr, les jours qui peuvent être cachés dans d'autres mois devraient être affichés avant de se cacher.
[4] Si le 30 du mois est dimanche, une nouvelle ligne sera occupée. À l'heure actuelle, en modifiant la valeur de la marge du 30e jour, il sera déplacé vers la première ligne (si le 31e jour peut occuper une nouvelle ligne, un traitement similaire sera effectué)
【5】 Après le chargement de la page, obtenez l'année et le mois en cours pour afficher le calendrier du mois en cours; Lorsque vous modifiez l'année ou le mois, obtenez la valeur modifiée et mettez à jour le calendrier
// PRÉPARATION: Obtenez la fonction de style actuelle getCSS (obj, style) {if (window.getCompuledStyle) {return getCompuledStyle (obj) [style]; } return obj.currentStyle [style];} // implémentation 1: Obtenez le nombre de jours du mois et le jour de la semaine le premier jour, 30e et 31 du mois de la fonction Get_Data (année, mois) {var result = {}; var d = new Date (); // si c'est février si (mois == 2) {// si c'est une année de saut si ((année% 4 === 0 && an% 100! == 0) || an% 400 === 0) {result.Days = 29; // s'il s'agit d'une année courante} else {result.days = 28; } // Si c'est le 4ème, 6e, 9e et novembre} else if (mois == 4 || MOIND == 6 || MOIS == 9 || MOIS == 11) {Result.Days = 30; } else {result.days = 31; // Le 31e jour du mois est le résultat de la semaine. Day31 semaine = D.Getday (D.settilyar (année, mois-1,31)); } // Le premier jour du mois est le résultat de la semaine. if (mois! = 2) {// Le 30e jour du mois est le résultat de la semaine. } Retour Résultat;} // Implémentation 2: Selon la semaine x du premier jour du mois, définissez la marge-gauche du premier jour = largeur * x afin qu'elle correspond à la fonction de position de la semaine correcte Move_Day1 (année, mois) {var semaine1 = get_data (année, mois) .Day1week; day1.style.marginleft = semaine1% 7 * parseInt (getcss (day1, 'width')) + 'px';} // implémentation 3: cachez le nombre de jours supplémentaires en fonction du nombre de jours dans le mois. Bien sûr, tout d'abord, nous devons d'abord afficher le nombre de jours cachées dans d'autres mois de fonction hide_days (année, mois) {// restaurer le nombre de jours qui peuvent être cachés dans d'autres mois pour (var i = 28; i <31; i ++) {daybox.children [i] .style.display = 'block'; } // masquer le nombre de jours excédentaire dans le mois var days = get_data (année, mois) .Days; pour (var i = jours; i <31; i ++) {daybox.children [i] .style.display = 'Aucun'; }}; // implémentation 4: Si le 30e ou le 31 du mois est dimanche, une nouvelle ligne sera occupée. Déplacez le jour nouvellement occupé vers la première ligne en définissant la fonction de marge MOVE_DAY30 (année, mois) {// Si le 30 du mois est dimanche if (get_data (année, mois) .Day30week === 0) {day30.style.margintop = parseInt (getcss (day30, 'height')) * (- 5) + 'px'; day31.style.margintop = parseInt (getcss (day31, 'height')) * (- 5) + 'px'; day31.style.margintop = parseInt (getcss (day31, 'height')) * (- 5) + 'px'; day31.style.marginleft = getcss (day31, 'largeur'); retour; } else {day30.style.margintop = day31.style.margintop = day31.style.marginleft = '0'; } // Si le 31 du mois est dimanche if (get_data (année, mois) .Day31week === 0) {day31.style.margintop = parseInt (getcss (day31, 'height')) * (- 5) + 'px'; } else {day31.style.margintop = '0'; }} // implémentation 5: Lorsque vous chargez la page, obtenez l'année et le mois en cours, affichez le calendrier du mois en cours; Lorsque vous modifiez l'année ou le mois, obtenez le calendrier modifié de l'année et du mois Conyear.Value; var mois = conmonth.Value; if (année <1900 || année> 2100) {année = conyear.value = new Date (). Gettillyear (); } if (mois <1 || mois> 12) {mois = conmonth.value = new Date (). getMonth () + 1; } move_day1 (année, mois); hide_days (année, mois); MOVE_DAY30 (année, mois);}Démonstration du code source
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.