Schreiben eines einfachen Kalenders basierend auf Javascript_Javascript-Kenntnissen

1. Problem mit der Anzahl der Zeilen in der Tabelle

Da Sie eine Datumstabelle anzeigen möchten, müssen Sie zunächst wissen, wie viele Zeilen und Spalten die Tabelle hat. Es wurden insgesamt 7 Spalten für den Sonntag ermittelt ) bis Samstag. Bevor Sie das Zeilennummernproblem lösen, müssen Sie zunächst wissen, welcher Wochentag der erste Tag dieses Monats ist, da der erste Tag eines jeden Monats im Kalender nicht immer am Sonntag beginnt. Der erste Tag kann Freitag oder Samstag sein . Unsicher, daher muss der linke Teil von Nr. 1 durch ein leeres Formular ersetzt werden. Wie viele leere Tabellen sollten also verwendet werden, um sie zu ersetzen? Die Methode getDay() gibt eine Zahl im Array zurück [0-6 steht für Sonntag, 2 steht für Dienstag usw.]. An. . Fällt also der 1. eines Monats auf einen Freitag, dann werden links 5 leere Tische benötigt. Wenn ein Monat dann 31 Tage hat, beträgt die endgültige Anzahl der Tabellenzeilen:

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

Natürlich hat nicht jeder Monat 31 Tage, daher müssen wir ein Array mit 12 Monaten erstellen, wobei jedes Element die Anzahl der in jedem Monat enthaltenen Tage darstellt. Aber der Februar ist etwas Besonderes. Der Februar hat in Schaltjahren 29 Tage, während der Februar in gewöhnlichen Jahren nur 28 Tage hat. Daher müssen Sie vor dem Erstellen eines Arrays eine Funktion zur Bestimmung von Schaltjahren erstellen:

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

Dann erstellen wir eine Reihe von Monaten:

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

So können Sie endlich die Anzahl der Zeilen in der Tabelle ermitteln, die für den aktuellen Monat erforderlich sind:

var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //Bestimmen Sie die Anzahl der für die Datumstabelle erforderlichen Zeilen

2. Kalenderformular drucken

Die Tabelle selbst ist ein zweidimensionales Array, also lassen Sie den for-Master zwei Schleifen ausführen, und der Code lautet wie folgt:

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. Im Anhang finden Sie den vollständigen js-Kalendercode

<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>
 

Fühlen Sie sich frei, mit dem CSS-Teil zu spielen. Die aktuelle Zeit ist der 2. Mai 2016. Das Rendering ist wie folgt:

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.