1. Masalah Hitungan Baris Tabel
Karena Anda ingin menampilkan tabel tanggal, Anda harus terlebih dahulu tahu berapa banyak baris dan kolom yang ada di tabel ini. Jumlah kolom telah ditentukan, dengan total 7 kolom dari hari Minggu (kolom pertama di kalender adalah hari Minggu) hingga Sabtu. Sebelum menyelesaikan masalah jumlah baris, Anda harus terlebih dahulu tahu hari apa hari pertama bulan itu, karena hari pertama setiap bulan tidak dimulai dari hari Minggu di kalender. Mungkin hari Jumat dan Sabtu, sehingga bagian kiri dari 1 harus diganti dengan meja kosong. Jadi berapa banyak tabel kosong yang harus digunakan sebagai gantinya? Di sini kita harus menggunakan metode getDay (), yang mengembalikan angka dalam array [0-6], 0 mewakili hari Minggu, 1 mewakili Senin, 2 mewakili Selasa, dan sebagainya. Jadi jika 1 bulan adalah hari Jumat, maka 5 formulir kosong diperlukan untuk menggantinya di sebelah kiri. Kemudian, jika ada 31 hari dalam sebulan, jumlah baris terakhir yang dapat ditemukan adalah:
var tr_nums = math.ceil ((5 + 31)/7);
Tentu saja, tidak setiap bulan adalah 31 hari, jadi kami harus membuat array 12 bulan, setiap elemen mewakili jumlah hari setiap bulan. Namun, Februari cukup istimewa. Ada 29 hari di bulan Februari dalam tahun kabisat dan hanya 28 hari di bulan Februari di tahun normal. Jadi, sebelum membuat array, Anda harus membuat fungsi yang melompati bertahun -tahun:
// Jika tahun berjalan dapat dibagi dengan 4 tetapi tidak dapat dibagi dengan 100 atau dapat dibagi dengan 400, itu dapat ditentukan sebagai tahun kabisat, pengembalian 1, jika tidak mengembalikan 0 fungsi isleap (tahun) {tahun pengembalian % 4 == 0? (Tahun % 100! = 0? 1: (Tahun % 400 == 0? 1: 0)): 0; }Lalu kami membuat array bulan:
var days_per_month = array baru (31, 28 + isleap (tahun), 31, 30, 31, 30, 31, 31, 30, 31, 31, 30, 31); Ini memastikan bahwa jumlah hari yang benar akan diambil di tahun -tahun biasa dan lompatan. Kode kode digunakan untuk mendapatkan informasi yang relevan tentang hari ini: var hari ini = tanggal baru (), // Dapatkan tanggal saat ini y = hari ini. Menyoroti hari saat membuat tabel tanggal) hari pertama = Tanggal baru (y, m, 1), // Dapatkan hari pertama bulan hari ini = hari pertama. 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31), // Buat array bulan
Jadi pada akhirnya, Anda bisa mendapatkan jumlah baris tabel yang diperlukan untuk bulan:
var str_nums = math.ceil ((dayofweek + days_per_month [m]) / 7); // Tentukan jumlah baris yang diperlukan untuk tabel tanggal
2. Cetak meja kalender
Tabel itu sendiri adalah array dua dimensi, jadi biarkan master keluar dan menjalankan dua loop untuk diselesaikan. Kodenya adalah sebagai berikut:
untuk (i = 0; i <str_nums; i += 1) {// Lapisan pertama untuk loop membuat dokumen tag tr tag ('<tr>'); untuk (k = 0; k <7; k ++) {// lapisan kedua untuk loop membuat tag td var idx = 7 * i+k; // Buat indeks untuk setiap tabel, mulai dari 0 var date = idx - dayofweek + 1; // Cocokkan 1 bulan ini dengan minggu // lakukan sesuatu yang lain} document.write ('</tr>'); }3. Lampirkan Kode Kalender JS Lengkap
<script> // menilai apakah tahun berjalan adalah tahun kabisat (ada 29 hari di bulan Februari tahun kabisat dan hanya 28 hari di bulan Februari tahun normal) Fungsi isleap (tahun) {tahun kembali % 4 == 0? (Tahun % 100! = 0? 1: (Tahun % 400 == 0? 1: 0)): 0; } var i, k, hari ini = tanggal baru (), // Dapatkan tanggal saat ini y = hari ini. Tabel Tanggal) Hari Pertama = Tanggal Baru (y, m, 1), // Dapatkan hari pertama bulan hari ini = hari pertama. 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), // Buat array bulan str_nums = math.ceil ((dayofweek + days_per_month [m]) /7); // Tentukan jumlah baris yang diperlukan untuk dokumen tabel tanggal.Write ("<Table CellPacing = '0'> <tr> <t th> hari </t> <t th> dua </t th> dua </th> <th> empat </t> <t th> enam </th> </tr>"); // Cetak baris pertama tabel (menampilkan minggu) untuk (i = 0; i <str_nums; i += 1) {// Buat dokumen tabel tanggal.write ('<tr>'); untuk (k = 0; k <7; k ++) {var idx = 7 * i+k; // Buat indeks untuk setiap tabel, mulai dari 0 var date = idx - dayofweek + 1; // Cocokkan 1 bulan ini dengan minggu ini (tanggal <= 0 || date> days_per_month [m])? Tanggal = '': Tanggal = IDX - Dayofweek + 1; // Indeks kurang dari atau sama dengan 0 atau lebih besar dari nilai maksimum bulan ini, gunakan tabel kosong alih -alih tanggal == D? document.write ('<td>' + date + '</td>'): document.write ('<td>' + date + '</td>'); // sorot hari} document.write ('</tr>'); } document.write ('</table>'); </script>Mari kita bermain dengan bebas di bagian CSS. Waktu saat ini adalah 2 Mei 2016, dan rendering adalah sebagai berikut:
Di atas adalah semua tentang artikel ini, saya harap akan sangat membantu bagi semua orang untuk mempelajari pemrograman JavaScript.