js pour écrire un effet de calendrier simple pour la journée

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. Le problème du nombre de lignes dans le tableau

Puisque vous souhaitez afficher un tableau de dates, vous devez d'abord savoir combien de lignes et de colonnes le tableau comporte. a été déterminé, à partir du dimanche (le premier jour du calendrier) Les colonnes sont dimanche) jusqu'au samedi, un total de 7 colonnes. 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, s'il y a 31 jours dans un mois, le nombre final de lignes du tableau est :

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

Bien sûr, non; each Chaque mois comporte 31 jours, nous devons donc créer un tableau contenant 12 mois, chaque élément représentant le nombre de jours 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 le 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);

De cette façon Pour garantir que le nombre correct de jours sera soustrait, qu'il s'agisse d'une année normale ou d'une année bissextile, le code suivant est utilisé pour obtenir les informations pertinentes du jour :

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), //创建月份数组

Ainsi au final, vous pouvez 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. Imprimez le tableau du calendrier

Le 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(&#39;<tr>&#39;);
  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(&#39;</tr>&#39;);
  }

3. Vous trouverez ci-joint le tableau complet. js code calendrier

<script>
  //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
  function isLeap(year) {
  return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 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=&#39;0&#39;><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(&#39;<tr>&#39;);
  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]) ? date = &#39; &#39;: date = idx - dayOfWeek + 1;  //索引小于等于0或者大于月份最大值就用空表格代替
   date == d ? document.write(&#39;<td class="today">&#39; + date + &#39;</td>&#39;) : document.write(&#39;<td>&#39; + date + &#39;</td>&#39;);  //高亮显示当天
  }
  document.write(&#39;</tr>&#39;);
  }
  document.write(&#39;</table>&#39;);
 </script>

partie css N'hésitez pas à jouer à votre guise L'heure actuelle est le 2 mai 2016. Les rendus sont les suivants :

L'effet de calendrier simple d'écriture js ci-dessus pour le jour [code d'implémentation] est partagé par l'éditeur. Je vous ai donné tout le contenu, j'espère qu'il pourra vous donner une référence , et j'espère également que vous soutiendrez le site Web chinois PHP Script Home

Pour plus d'articles sur js sur l'écriture d'effets de calendrier simples pour la journée, veuillez faire attention au site Web chinois PHP !