Saya selalu ingin menulis kalender di JavaScript sebelumnya, tetapi karena saya tidak punya ide bagus sama sekali, saya sudah lama tidak mencobanya. Baru -baru ini, saya kebetulan melihat contoh kalender sederhana yang ditulis dalam JavaScript di internet. Meskipun kodenya tidak besar, saya pikir itu menjelaskan prinsip implementasi Kalender JS dengan baik. Saya juga mencobanya dan mendapatkan banyak hal. Setelah menguasai prinsip -prinsip implementasi dasar, saya ingin menambahkan lebih banyak fungsi dan dapat memainkannya dengan bebas. Izinkan saya membagikannya di sini dulu. Jika Anda tertarik, Anda dapat mencobanya!
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, kembali, 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);
Ini memastikan bahwa jumlah hari yang benar akan diambil di tahun -tahun biasa dan lompatan. Kode berikut digunakan untuk mendapatkan informasi yang relevan untuk hari ini:
var hari ini = tanggal baru (), // Dapatkan tanggal saat ini y = hari ini. = new Date(y, m, 1), //Get the first day of the month dayOfWeek = firstday.getDay(), //Judge the day of the week (return to one of [0-6], 0 represents Sunday, 1 represents Monday, and so on) days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31), //Create the month array
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:
Artikel di atas "Efek Kalender Sederhana pada Hari Penulisan JS" adalah semua konten yang saya bagikan dengan Anda. Saya harap Anda dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.