js, um einen einfachen Kalendereffekt für den Tag zu schreiben [Implementierungscode]_Javascript-Kenntnisse

Ich wollte schon immer einen Kalender mit Javascript schreiben, habe es aber nicht ausprobiert, weil ich überhaupt keine guten Ideen habe. Kürzlich habe ich zufällig ein Beispiel für einen einfachen, in Javascript geschriebenen Kalender im Internet gesehen. Obwohl die Codemenge nicht groß ist, denke ich, dass sie das Implementierungsprinzip von js Calendar sehr gut erklärt. Ich habe es auch selbst ausprobiert und viel gewonnen. Wenn ich die grundlegenden Implementierungsprinzipien beherrsche, kann ich es zuerst hier teilen.

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

Dadurch wird sichergestellt, dass die richtige Anzahl von Tagen abgerufen wird, unabhängig davon, ob es sich um ein normales Jahr oder ein Schaltjahr handelt. Der folgende Code wird verwendet, um die relevanten Informationen für den heutigen Tag zu erhalten:

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

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:

Der obige js, der einen einfachen Kalendereffekt für den Tag schreibt [Implementierungscode], ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, er kann Ihnen eine Referenz geben und ich hoffe, dass Sie Script Home unterstützen.