J'ai toujours voulu écrire un calendrier en JavaScript auparavant, mais parce que je n'ai pas de bonnes idées du tout, je ne l'ai pas essayé depuis longtemps. Récemment, j'ai vu un exemple de calendrier simple écrit en JavaScript sur Internet. Bien que le code ne soit pas important, je pense qu'il explique bien le principe de mise en œuvre du calendrier JS. Je l'ai également essayé et j'ai gagné beaucoup. Après avoir maîtrisé les principes de mise en œuvre de base, je souhaite ajouter plus de fonctions et je peux le jouer librement. Permettez-moi de le partager ici d'abord. Si vous êtes intéressé, vous pouvez l'essayer!
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 0function 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);
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 pour aujourd'hui:
var aujourd'hui = new Date (), // Obtenez la date actuelle y = aujourd'hui.getlyear (), // Obtenez l'année dans la date m = aujourd'hui.getMonth (), // Obtenez le mois dans la date (il convient de noter que le mois est calculé à partir de 0, et la valeur obtenue est de 1 inférieure à la valeur du mois normal) D = aujourd'hui. = nouvelle date (y, m, 1), // Obtenez le premier jour du mois de jourofweek = premier jour.getDay (), // juger le jour de la semaine (retour à l'un des [0-6], 0 représente le dimanche, 1 représente le lundi, et ainsi de suite) Days_per_Month = New Array (31, 28 + Isleap (Y), 31, 31, 30, 31, 31, 30, 31, 31), // Créer le mois Array
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:
L'article ci-dessus "L'effet du calendrier simple sur le jour de l'écriture JS" est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.