L'affichage du calendrier, la sélection, etc. sont utilisés dans de nombreux endroits sur la page Web. Cet article utilise HTML, CSS et JavaScript pour implémenter un calendrier simple. Une fois terminé, l'effet est similaire à l'effet sur le côté gauche de la page. Vous pouvez passer au mois précédent ou le mois prochain. Il peut également être élargi en fonction des conditions réelles.
html
La partie HTML est relativement simple, déclare une div, et le HTML spécifique est généré à l'aide de JavaScript. Le contenu global est à peu près comme ceci:
<! doctype html> <html> <éadf> <meta charset = 'utf-8'> <link rel = 'stylesheet' href = 'external css path path' /> <title> démo </ title> </ad> <body> <div class = 'calendar' id = 'calendar'> </v> <script type = 'text / javascript' src = '> </v> <script type =' text / javas / javascript 'src = `` externe = Path du fichier javascript '> </ script> </ body> </html>
CSS
/ * Paramètres globaux * / * {marge: 0px; padding: 0px;} / ** * définir la taille du calendrier * /. Calendrier {width: 240px; hauteur: 400px; Affichage: Block;} / ** * Définissez la boîte supérieure du calendrier * /. Calendar .Calendar-title-box {position: relative; Largeur: 100%; hauteur: 36px; hauteur de ligne: 36px; Texte-aligne: Centre; Border-Bottom: 1px solide #ddd;} / ** * Définissez l'icône du bouton pour le mois dernier * /. Calendar .Prev-Month {position: Absolute; En haut: 12px; gauche: 0px; Affichage: bloc en ligne; Largeur: 0px; hauteur: 0px; Border-Left: 0px; Border-top: 6px solide transparent; Border-droite: 8px Solid # 999; Bordure-fond: 6px solide transparent; curseur: pointeur;} / ** * Définir l'icône du bouton du mois prochain * /. Calendar .Next-Month {position: Absolute; En haut: 12px; Droite: 0px; Affichage: bloc en ligne; Largeur: 0px; hauteur: 0px; Border-droite: 0px; Border-top: 6px solide transparent; Border-Left: 8px solide # 999; Bordure-fond: 6px solide transparent; curseur: pointeur;} / * Set Calendar Table Style * /. Calendar-Table {width: 100%; Border-Collapse: s'effondrer; Text-Align: Center;} / * Table Line Hight * /. Calendar-Table TR {hauteur: 30px; LINE-HEIGHT: 30px;} / * Couleur du jour Couleur Affichage spécial * /. Currentday {Color: Red;} / * Couleur de texte de ce mois * /. CurrentMonth {Color: # 999;} / * Autres couleurs du mois * /. AutreMonth {Color: #ede;}Il n'y a pratiquement rien à dire sur les paramètres de style, certains paramètres simples. Par exemple, le spécial est l'icône qui représente "le mois dernier" et "le mois prochain", qui adopte le positionnement absolu et utilise l'attribut de bordure dans CSS pour définir des styles.
objet de date javascript
Avant de commencer le code JS formel, vous devez comprendre l'objet date dans JS. Grâce à l'objet de date, vous pouvez obtenir des informations telles que l'année, le mois, le jour, l'heure et les horodatages. Pour une référence spécifique: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = new Date (); // Obtenez l'heure actuelle actuelle que mon heure actuelle est le lundi 25 avril 2016 d1.getlyar (); // Obtenez les informations annuelles, 2016 d1.getMonth (); // Obtenez les informations mensuelles (à partir de 0: 0-11) 3 d1.getDate (); // Obtenez les informations du jour ici le résultat: 25 d1.getDay (); // Obtenez les informations hebdomadaires (0-6) ici le résultat: 1
Vous pouvez également définir les informations de l'année, du mois et de la date directement lors de l'initialisation
# Set 15 mars 2016 var d2 = nouvelle date (2016, 2, 15); // Les mois sont comptés à partir de 0, et vous devez soustraire un d2.getante (); // 2016 d2.getMonth (); // 2 d2.getDate (); // 15 D2.TolocaleDateString (); // "2016/3/15" prouve que les paramètres sont corrects
Le calendrier implique des questions telles que le nombre de jours par mois. C'est très simple dans JS. Si l'année, le mois et le jour sont définis, s'il dépasse le mois en cours, JS calcule automatiquement le mois prochain. Par exemple, avril n'a que 30 jours. S'il est défini sur 31, le type de date obtenu calculera automatiquement le 1er mai. S'il est fixé à 0, JS le traitera comme le 30 avril, alors le 1er mai est le 29 avril.
var d3 = nouvelle date (2016, 3, 30); d3.TolocaleDateString (); // "2016/4/30" var d4 = nouvelle date (2016, 3, 31); d4.TolocaleDateString (); // "2016/5/1" var d5 = nouvelle date (2016, 3, 33); d5.TolocaleDateString (); // "2016/5/3" var d6 = nouvelle date (2016, 4, 1); d6.tolocaledatestring (); // "2016/5/1" var d7 = nouvelle date (2016, 4, 0); d7.tolocaledatestring (); // "2016/4/30" var d8 = nouvelle date (2016, 4, -3); d8.tolocaledatestring (); // "2016/4/27"
javascrip
Après avoir compris l'utilisation de base des objets de date dans JS, l'étape suivante est la pièce d'implémentation de code. L'idée globale est la suivante: Définissez une variable Global DateObj pour enregistrer les informations de l'année et du mois qui doivent être affichées dans le tableau. Le contenu du titre est pris en fonction de DateObj. La date du tableau prend toutes les informations du n ° 1 correspondant à l'année et au mois de DateObj, puis détermine la position du n ° 1 dans la première rangée du tableau, afin d'inverser les données des derniers jours du mois précédent, et les données de ce mois et du mois prochain sont repoussées.
Étapes spécifiques:
1. Déclarez la variable DateObj et attribuez la valeur initiale à l'heure système actuelle
2. Rendre les éléments HTML dans Calendar Div
3. Obtenez les informations sur le 1er du mois via DateObj et utilisez-les pour traverser toutes les dates du tableau.
4. Bind Events pour les icônes du mois précédent et du mois prochain
(fonction () {/ * * Utilisé pour enregistrer les dates. Lorsqu'il est affiché, il sera affiché en fonction de l'année et du mois de la date dans DateObj * / var DateObj = (fonction () {var _Date = new Date (); // Default est le temps système actuel return {GetDate: function () {return _Date;}, SetDate: function (date) {_date); // Définissez la partie HTML dans le calendrier div rendehtml (); Définit le titre du mois précédent le mois prochain var bodybox = document.CreateElement ("div"); id = 'calendartitle'> </span> "+" <span id = 'nextmonth' class = 'next-month'> </span> "; calendar.appendChild (titlebox); // ajouter à calendar div // définir la structure html de la table bodybox.classname = 'calendar-body'; + "<th> un </ th>" + "<th> deux </ th>" + "<th> trois </ th>" + "<th> quatre </ th>" + "<th> cinq </ th>" + "<th> six </ th>" + "</tr>"; » "<td> </ td>" + "<td> </ td>" + "</tr>";} bodybox.innerhtml = "<table Dans la table et définir le nom de classe * / fonction showcalendardata () {var _year = dateoBj.getDate (). GetMilyear (); Document.getElementById ("Calendartitle"); _Table.getElementsByTagName ("TD"); _Thisdaystr = getDatestr (_Thisday); day_tds [i] .classname = 'Currentday';} else if (_Thisdaystr.Substr (0, 6) == getDatestr (_Firstday) .Substr (0, 6)) {_tds [i] .classname = 'CurrentMonth'; } / ** * Ligne l'événement du mois précédent * / fonction BindEvent () {var prevmonth = document.getElementyid ("prevmont"); AddEvent (dom, etype, func) {if (dom.addeventListener) {// dom 2.0 dom.addeventListener (eType, fonction (e) {func (e);}); 0 Dom [sur '+ eType] = fonction (e) {func (e);}} / ** * Cliquez sur l'icône du dernier mois pour déclencher * Cliquez sur l'icône du mois prochain pour déclencher * / fonction TONEXTMONTH () {Var Date = DateObj.getDate (); {var _year = date.getlyar (); return _year + _month + _d;}}) ();Dans cet exemple, l'événement en cliquant sur la date du tableau n'est pas ajouté. Vous pouvez ajouter le code suivant à la fonction BindEvent pour obtenir les informations sur la date cliquée.
var table = document.getElementById ("calendartable"); var tds = table.getElementsByTagName ('td'); for (var i = 0; i <tds.length; i ++) {addEvent (tds [i], 'click', function (e) {console.log (e.target.getAttribute ('data');});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.