js, um einen einfachen Kalendereffekt für den Tag zu schreiben

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 im Internet zufällig ein Beispiel für einen einfachen, in JavaScript geschriebenen Kalender gesehen. Obwohl die Codemenge nicht groß ist, erklärt sie meiner Meinung nach das Implementierungsprinzip des js-Kalenders sehr gut. Ich habe es auch selbst ausprobiert und viel gewonnen. Wenn ich die grundlegenden Implementierungsprinzipien beherrsche, kann ich es zuerst hier teilen.

Das Problem 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 wurde ermittelt, beginnend von Sonntag (1. im Kalender) Die Spalten sind Sonntag) bis Samstag, insgesamt 7 Spalten. 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, ist die endgültige Anzahl der Tabellenzeilen:

var tr_nums = Math.ceil((5 + 31)/7>Natürlich nicht Each Der Monat hat 31 Tage, daher müssen wir ein Array mit 12 Monaten erstellen, wobei jedes Element die Anzahl der Tage in jedem Monat 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 des Arrays eine Funktion zur Bestimmung von Schaltjahren erstellen:

Dann erstellen wir ein Array von Monaten:

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

var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

Auf diese Weise wird der folgende Code verwendet, um sicherzustellen, dass die richtige Anzahl an Tagen ermittelt wird, unabhängig davon, ob es sich um ein normales Jahr oder ein Schaltjahr handelt:

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 am Ende 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. Drucken Sie die Kalendertabelle aus

Die Die Tabelle selbst ist ein zweidimensionales Array. Lassen Sie den for-Master also zwei Schleifen ausführen. Der Code lautet wie folgt:

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

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

CSS-Teil Fühlen Sie sich frei, nach Belieben zu spielen. Die aktuelle Zeit ist der 2. Mai 2016. Die Darstellungen sind wie folgt:

Der obige js, der einen einfachen Kalendereffekt für den Tag schreibt [Implementierungscode], wird vom Herausgeber geteilt. Ich habe Ihnen den gesamten Inhalt gegeben, ich hoffe, er kann Ihnen eine Referenz geben , und ich hoffe auch, dass Sie die chinesische PHP-Website von Script Home unterstützen

Weitere Artikel zum Thema JS zum Schreiben einfacher Kalendereffekte für den Tag finden Sie auf der chinesischen PHP-Website!