js pour écrire un effet de calendrier simple pour la journée [code d'implémentation] compétences _javascript

J'ai toujours voulu écrire un calendrier en utilisant javascript, mais je ne l'ai pas essayé car je n'ai aucune bonne idée du tout. Récemment, il m'est arrivé de voir un exemple de calendrier simple écrit en javascript sur Internet. Bien que la quantité de code ne soit pas importante, je pense que cela explique très bien le principe d'implémentation du calendrier js. Je l'ai aussi essayé moi-même et j'ai beaucoup gagné. Après avoir maîtrisé les principes de base de mise en œuvre, je peux l'utiliser librement si je souhaite ajouter plus de fonctions. Si vous êtes intéressé, vous pouvez l'essayer !

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 n'ont 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 particulier : 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);

Cela garantit que le nombre correct de jours sera récupéré, qu'il s'agisse d'une année ordinaire ou d'une année bissextile. Le code suivant est utilisé pour obtenir les informations pertinentes d'aujourd'hui :

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); //确定日期表格所需的行数

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 :

L'effet de calendrier simple d'écriture js ci-dessus pour la journée [code d'implémentation] est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez Script Home.