1. Problème de nombre de lignes de table
Étant donné que vous souhaitez afficher la table des date, vous devez d'abord savoir combien de lignes et de colonnes il y a dans ce tableau. Le nombre de colonnes a été déterminé, avec un total de 7 colonnes de dimanche (la première colonne du calendrier est dimanche) à samedi. Avant de résoudre le problème du nombre de lignes, vous devez d'abord savoir quel est le jour du premier jour du mois, car le premier jour de chaque mois ne commence pas du dimanche le calendrier. Ce peut être vendredi et samedi, donc la partie gauche du 1er doit être remplacée par une table vide. Alors, combien de tables vides doivent être utilisées à la place? Ici, nous devons utiliser la méthode getday (), qui renvoie un nombre dans le tableau [0-6], 0 représente le dimanche 1 représente le lundi, 2 représente mardi, etc. Donc, si le 1er d'un mois est vendredi, 5 formulaires vides sont nécessaires pour les remplacer sur la gauche. Ensuite, s'il y a 31 jours par mois, le dernier nombre de lignes à trouver est:
var tr_nums = math.ceil ((5 + 31) / 7);
Bien sûr, chaque mois n'est pas de 31 jours, nous devons donc créer un tableau de 12 mois, chaque élément représente le nombre de jours par mois. Cependant, février est assez spécial. Il y a 29 jours en février au cours d'une année bordeuse et seulement 28 jours en février au cours d'une année normale. Donc, avant de créer un tableau, vous devez créer une fonction qui juge les années à saut par vous-même:
// Si l'année en cours peut être divisible par 4 mais ne peut pas être divisible par 100 ou peut être divisible par 400, elle peut être déterminée comme une année de saut, retour 1, sinon renvoyer 0 fonction isLeap (année) {Retour Année% 4 == 0? (Année% 100! = 0? 1: (Année% 400 == 0? 1: 0)): 0; }Ensuite, nous créons un éventail de mois:
var days_per_month = nouveau tableau (31, 28 + Isleap (année), 31, 30, 31, 30, 31, 31, 30, 31, 31, 30, 31); Cela garantit que le nombre correct de jours sera retiré au cours des années ordinaires et de saut. Le code suivant est utilisé pour obtenir des informations pertinentes sur aujourd'hui: var dès aujourd'hui = new Date (), // Obtenez la date actuelle y = aujourd'hui.getlyar (), // obtenez l'année dans la date m = aujourd'hui.getMonth (), // Obtenez la valeur obtenue est de 1 inférieure de la valeur de la valeur normale) D = aujourd'hui.getDate (), highlighting the day when creating the date table) firstday = new Date(y, m, 1), //Get the first day of the month dayOfWeek = firstday.getDay(), //Judge the day of the week (return one in [0-6], 0 represents Sunday, 1 represents Monday, and so on) days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 31, 30, 31, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31), // Créer le mois
Ainsi, à la fin, vous pouvez obtenir le nombre de lignes de la table requise pour le mois:
var str_nums = math.ceil ((dayofweek + days_per_month [m]) / 7); // Déterminer le nombre de lignes requises pour le tableau des dates
2. Imprimez une table de calendrier
Le tableau lui-même est un tableau bidimensionnel, alors laissez le maître pour sortir et exécuter deux boucles à compléter. Le code est le suivant:
pour (i = 0; i <str_nums; i + = 1) {// La première couche pour Loop crée un document TAG.Write ('<Tr>'); pour (k = 0; k <7; k ++) {// La deuxième couche pour la boucle crée td balise var idx = 7 * i + k; // Créer un index pour chaque tableau, à partir de 0 var date = idx - dayofweek + 1; // correspond au 1er du mois avec la semaine // faire autre chose} document.write ('</tr>'); }3. Joignez le code du calendrier JS complet
<Script> // Jugez si l'année en cours est une année LEAP (il y a 29 jours en février de l'année Leap et seulement 28 jours en février de l'année normale) Fonction Isleap (année) {Retour Année% 4 == 0? (Année% 100! = 0? 1: (Année% 400 == 0? 1: 0)): 0; } var i, k, aujourd'hui = new Date (), // Obtenez la date actuelle y = aujourd'hui.getlyear (), // obtenez l'année dans la date m = aujourd'hui.getMonth (), // Obtenez la valeur obtenue dans la date (il faut noter que: le mois est calculé à partir de 0 date table) firstday = new Date(y, m, 1), //Get the first day of the month dayOfWeek = firstday.getDay(), //Judge the day of the week (return one in [0-6], 0 represents Sunday, 1 represents Monday, and so on) days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 31, 31, 30, 31, 31, 30, 31, 31, 30, 31, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), // Créez le mois Array str_nums = math.ceil ((dayofweek + days_per_month [m]) / 7); // Déterminez le nombre de lignes requises pour Date Table Document.Write ("<Table CellPacing = '0'> <Tr> <th> Day </ Th> <th> Two </ Th> <th> Two </ Th> <th> Four </th> <th> six </th> </tr>"); // imprime la première ligne de la table (affichant la semaine) pour (i = 0; i <str_nums; i + = 1) {// Créer un document de table de date.Write ('<tr>'); pour (k = 0; k <7; k ++) {var idx = 7 * i + k; // Créez un index pour chaque tableau, à partir de 0 var date = idx - dayofweek + 1; // correspond au 1er du mois avec la semaine (date <= 0 || date> days_per_month [m])? date = '': date = idx - dayofweek + 1; // L'indice est inférieur ou égal à 0 ou supérieur à la valeur maximale du mois, utilisez un tableau vide au lieu de Date == D? document.write ('<td>' + date + '</td>'): document.write ('<Td>' + date + '</td>'); // met en évidence le jour} document.write ('</tr>'); } document.write ('</pally>'); </cript>Jouons librement dans la partie CSS. L'heure actuelle est le 2 mai 2016 et les rendus sont les suivants:
Ce qui précède concerne cet article, j'espère qu'il sera utile pour tout le monde d'apprendre la programmation JavaScript.