js menulis kesan kalendar ringkas untuk hari [kod pelaksanaan]_kemahiran javascript

Saya sentiasa mahu menulis kalendar menggunakan javascript, tetapi saya tidak mencubanya kerana saya tidak mempunyai idea yang bagus langsung. Baru-baru ini, saya kebetulan melihat contoh kalendar ringkas yang ditulis dalam javascript di Internet Walaupun jumlah kod tidak besar, saya fikir ia menerangkan prinsip pelaksanaan kalendar js dengan baik. Saya juga mencuba sendiri dan mendapat banyak setelah menguasai prinsip pelaksanaan asas, saya boleh menggunakannya secara bebas jika saya ingin menambah lebih banyak fungsi.

1. Masalah dengan bilangan baris dalam jadual

Memandangkan anda ingin memaparkan jadual tarikh, anda mesti mengetahui jumlah baris dan lajur jadual tersebut. Bilangan lajur telah ditentukan jumlahnya dari hari Ahad (lajur pertama pada kalendar ialah hari Ahad ) 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 membuat 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);

Ini memastikan bilangan hari yang betul akan diambil sama ada tahun biasa atau tahun lompat Kod berikut digunakan untuk mendapatkan maklumat berkaitan hari ini:

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

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:

Kesan kalendar ringkas penulisan js di atas untuk hari [kod pelaksanaan] ialah semua kandungan yang dikongsi oleh editor saya harap ia boleh memberi rujukan kepada anda, dan saya harap anda akan menyokong Script Home.