Rédaction d'un calendrier simple basé sur les compétences javascript_javascript

1. Problème avec le nombre de lignes dans le tableau

Puisque vous souhaitez afficher un tableau de dates, vous devez d'abord connaître le nombre de lignes et de colonnes du tableau. Le nombre de colonnes a été déterminé. Il y a 7 colonnes au total à partir du dimanche (la première colonne du calendrier est le dimanche). ) à samedi. Avant de résoudre le problème du numéro de ligne, vous devez d'abord savoir quel jour de la semaine est le premier jour de ce mois, car le premier jour de chaque mois ne commence pas toujours le dimanche sur le calendrier. Le premier jour peut être un vendredi ou un samedi. . Incertain, donc la partie gauche du n°1 doit être remplacée par un formulaire vide. Alors, combien de tables vides faut-il utiliser pour le remplacer ? La méthode getDay() doit être utilisée ici. Cette méthode renvoie un nombre dans le tableau [0-6]. sur. . Ainsi, si le 1er du mois tombe un vendredi, il faudra alors 5 tables vides à gauche. Ensuite, si un mois comporte 31 jours, le nombre final de lignes du tableau est :

var tr_nums = Math.ceil((5 + 31)/7

Bien sûr, tous les mois ne comportent pas 31 jours, nous devons donc créer un tableau contenant 12 mois, chaque élément représentant le nombre de jours contenus dans chaque mois. Mais février est spécial : février des années bissextiles compte 29 jours, alors que février des années ordinaires n'a que 28 jours. Par conséquent, avant de créer un tableau, vous devez créer une fonction pour déterminer les années bissextiles :

 //如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回0
 function isLeap(year) {
 return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
 }

Ensuite, nous créons un tableau de mois :

var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
 这样就能保证无论是平年还是闰年都会取出正确的天数，下面的代码用于获取今天的相关信息:
var today = new Date(),       //获取当前日期
   y = today.getFullYear(),     //获取日期中的年份
   m = today.getMonth(),      //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
   d = today.getDate(),       //获取日期中的日(方便在建立日期表格时高亮显示当天)
   firstday = new Date(y, m, 1),  //获取当月的第一天
   dayOfWeek = firstday.getDay(),  //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
   days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), //创建月份数组

Vous pouvez enfin obtenir le nombre de lignes du tableau requis pour le mois en cours :

var str_nums = Math.ceil((dayOfWeek +days_per_month[m]) / 7); //Déterminez le nombre de lignes requises pour la table de dates

2. Imprimer le formulaire de calendrier

La table elle-même est un tableau à deux dimensions, alors laissez le for master exécuter deux boucles et ce sera fait. Le code est le suivant :

for (i = 0; i < str_nums; i += 1) {   //第一层for循环创建tr标签
  document.write('<tr>');
  for (k = 0; k < 7; k++) {      //第二层for循环创建td标签
   var idx = 7 * i + k;        //为每个表格创建索引,从0开始
   var date = idx - dayOfWeek + 1;  //将当月的1号与星期进行匹配
   //do something else
  }
  document.write('</tr>');
  }

3. Ci-joint le code complet du calendrier js

<script>
  //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
  function isLeap(year) {
  return year % 4 == 0 &#63; (year % 100 != 0 &#63; 1 : (year % 400 == 0 &#63; 1 : 0)) : 0;
  }
  var i, k,
  today = new Date(),                 //获取当前日期
  y = today.getFullYear(),              //获取日期中的年份
  m = today.getMonth(),                //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
  d = today.getDate(),                //获取日期中的日(方便在建立日期表格时高亮显示当天)
  firstday = new Date(y, m, 1),            //获取当月的第一天
  dayOfWeek = firstday.getDay(),           //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
  days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),         //创建月份数组
  str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);                        //确定日期表格所需的行数
  document.write("<table cellspacing='0'><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)
  for (i = 0; i < str_nums; i += 1) {         //二维数组创建日期表格
  document.write('<tr>');
  for (k = 0; k < 7; k++) {
   var idx = 7 * i + k;                //为每个表格创建索引,从0开始
   var date = idx - dayOfWeek + 1;          //将当月的1号与星期进行匹配
   (date <= 0 || date > days_per_month[m]) &#63; date = ' ': date = idx - dayOfWeek + 1;  //索引小于等于0或者大于月份最大值就用空表格代替
   date == d &#63; document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>');  //高亮显示当天
  }
  document.write('</tr>');
  }
  document.write('</table>');
 </script>
 

N'hésitez pas à jouer avec la partie css L'heure actuelle est le 2 mai 2016. Le rendu est le suivant :

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde dans l'apprentissage de la programmation javascript.