Menulis kalendar ringkas berdasarkan kemahiran javascript_javascript

1. Masalah dengan bilangan baris dalam jadual

Memandangkan anda ingin memaparkan jadual tarikh, anda mesti tahu berapa banyak baris dan lajur jadual tersebut. Jumlah lajur telah ditentukan ) hingga hari Sabtu. Sebelum menyelesaikan masalah nombor baris, anda mesti terlebih dahulu tahu apa hari dalam minggu hari pertama bulan ini, kerana hari pertama setiap bulan tidak selalunya bermula dari Ahad pada kalendar Hari pertama mungkin hari Jumaat, atau Sabtu . Tidak pasti, jadi bahagian kiri No 1 mesti diganti dengan borang kosong. Jadi berapa banyak jadual kosong yang perlu digunakan untuk menggantikannya Kaedah getDay() mesti digunakan di sini Kaedah ini mengembalikan nombor dalam tatasusunan [0-6]. pada . Jadi jika 1 haribulan jatuh pada hari Jumaat, maka 5 meja kosong akan diperlukan di sebelah kiri. Kemudian, jika sebulan mempunyai 31 hari, bilangan akhir baris jadual ialah:

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

Sudah tentu, bukan setiap bulan mempunyai 31 hari, jadi kita perlu mencipta tatasusunan yang mengandungi 12 bulan, setiap elemen mewakili bilangan hari yang terkandung dalam setiap bulan. Tetapi Februari adalah istimewa pada tahun lompat mempunyai 29 hari, manakala Februari pada tahun biasa hanya mempunyai 28 hari. Oleh itu, sebelum mencipta tatasusunan, anda perlu mencipta fungsi untuk menentukan tahun lompat:

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

Kemudian kami mencipta susunan bulan:

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

Jadi akhirnya anda boleh mendapatkan bilangan baris dalam jadual yang diperlukan untuk bulan semasa:

var str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7); //Tentukan bilangan baris yang diperlukan untuk jadual tarikh

2. Cetak borang kalendar

Jadual itu sendiri ialah tatasusunan dua dimensi, jadi biarkan untuk master menjalankan dua gelung dan ia akan dilakukan seperti berikut:

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 Dilampirkan kod kalendar js yang lengkap

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

Jangan ragu untuk bermain dengan bahagian css Masa semasa ialah 2 Mei 2016. Rendering adalah seperti berikut:

Di atas adalah keseluruhan kandungan artikel ini saya harap ia akan membantu semua orang dalam mempelajari pengaturcaraan javascript.