Kata -kata sebelumnya
Kalender sederhana adalah aplikasi umum objek tanggal dalam JavaScript dan memiliki berbagai macam kegunaan. Artikel ini akan menjelaskan secara rinci ide implementasi kalender sederhana.
Efek demonstrasi
Deskripsi html
Gunakan dua input tipe = angka sebagai kontrol input untuk masing -masing tahun dan bulan, sehingga tombol penyesuaian termasuk dalam browser canggih
Atur minggu secara berurutan dari hari Minggu hingga Senin
<div> <header class='control'> <input id="conYear" type="number" min="1900" max="2100" step="1"/> <input id="conMonth" type="number" min="1" max="12" step="1"/> </header> <div> <header class='week'> <div>Sunday</div> <div>Monday</div> <dv> tue </div> <div> Kamis </div> <div> Jumat </div> <div> Sabtu </div> </ header> <bagian id = 'daybox'> <v id = "day1"> 1 </div> <v> 2 </Div> <v> 3 </Div> <v> </Div> Div> </Div> Div> Div> Div> </Div> <v> </Div> <Div> </Div> Div> </Div> </Div> </Div> <Div> </Div> Div> Div> <dv> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> <piv> 15 <dv> 23 </div> <div> 24 </div> <viv> 25 </div> <div> 26 </div> <div> 27 </div> <v> 28 </div> <div> 29
Deskripsi CSS
Untuk implementasi kalender sederhana, pertama -tama tentukan pengaturan Divs of Class = "Day" dalam kalender untuk mengambang. Ini memungkinkan semua div dengan level yang sama untuk mengikuti gerakan dengan mengubah posisi div hari pertama.
body {margin: 0;} input {border: none; padding: 0;}. Box {width: 354px; Margin: 30px Auto 0; } .DateBox {height: 300px; Border: 2px solid black;} .week {overflow: tersembunyi; Border-Bottom: 1px solid black; line-height: 49px;}. Week-in {height: 49px; float: kiri; Lebar: 50px; Text-Align: center;}. Daybox {overflow: tersembunyi;}. Day {float: left; Tinggi: 50px; Lebar: 50px; Font: 20px/50px 'Microsoft Yahei'; text-align: center;}. control {overflow: tersembunyi;}. con-in {height: 50px; float: kiri; Lebar: 100px; Teks-Align: tengah; Font: 20px/50px "Microsoft Yahei";}Deskripsi JS
Sebanyak 5 implementasi diperlukan untuk logika JS dari kalender sederhana:
【1】 Anda perlu memperoleh jumlah hari dalam sebulan, dan hari apa hari pertama, hari ke -30, dan hari ke -31 adalah minggu
【2】 Menurut minggu hari pertama bulan itu, ubah nilai margin-kiri pada hari pertama dan pindahkan hari pertama ke posisi yang sesuai; Karena hubungan mengambang, sisa hari juga akan bergerak ke posisi yang sesuai juga.
【3】 Sembunyikan hari ekstra sesuai dengan jumlah hari dalam sebulan; Tentu saja, hari -hari yang mungkin disembunyikan di bulan -bulan lain harus ditampilkan sebelum bersembunyi.
[4] Jika tanggal 30 bulan ini adalah hari Minggu, jalur baru akan ditempati. Pada saat ini, dengan mengubah nilai margin hari ke -30, itu akan dipindahkan ke baris pertama (jika hari ke -31 dapat menempati baris baru, perlakuan serupa akan dilakukan)
【5】 Setelah memuat halaman, dapatkan tahun dan bulan saat ini untuk menampilkan kalender bulan ini; Saat mengubah tahun atau bulan, dapatkan nilai yang diubah dan perbarui kalender
// Persiapan: Dapatkan fungsi gaya saat ini getCSS (obj, style) {if (window.getComputedStyle) {return getComputedStyle (OBJ) [style]; } return obj.currentstyle [style];} // Implementasi 1: Dapatkan jumlah hari dalam sebulan, dan hari dalam seminggu pada hari pertama, 30th dan 31 fungsi bulan get_data (tahun, bulan) {var result = {}; var d = tanggal baru (); // Jika ini bulan Februari jika (bulan == 2) {// Jika itu adalah tahun kabisat jika ((tahun % 4 === 0 && tahun % 100! == 0) || tahun % 400 === 0) {result.days = 29; // jika itu adalah tahun yang umum} else {result.days = 28; } // Jika itu adalah tanggal 4, 6, 9, dan November} lain jika (bulan == 4 || bulan == 6 || bulan == 9 || bulan == 11) {result.days = 30; } else {result.days = 31; // Hari ke-31 dalam sebulan adalah hasil minggu.day31week = d.getday (d.setar (tahun, bulan-1,31)); } // Hari pertama bulan ini adalah hasil minggu.day1week = d.getday (d.setarear (tahun, bulan-1,1)); if (month! = 2) {// Hari ke-30 dalam bulan adalah hasil minggu.day30week = D.getday (d.setlyar (tahun, bulan-1,30)); } Hasil pengembalian;} // Implementasi 2: Menurut minggu x hari pertama bulan itu, atur margin-kiri hari pertama = lebar *x sehingga sesuai dengan fungsi posisi minggu yang benar MOVE_day1 (tahun, bulan) {var week1 = get_data (tahun, bulan) .day1week; day1.style.marginleft = minggu1%7*parseInt (getCSS (day1, 'width'))+ 'px';} // Implementasi 3: Sembunyikan jumlah hari tambahan sesuai dengan jumlah hari dalam bulan ini. Tentu saja, pertama -tama, pertama -tama kita harus menampilkan jumlah hari yang tersembunyi di bulan lain fungsi Hide_days (tahun, bulan) {// Kembalikan jumlah hari yang mungkin disembunyikan di bulan -bulan lain untuk (var i = 28; i <31; i ++) {daybox.children [i] .style.display = 'block'; } // Sembunyikan jumlah hari kelebihan di bulan var hari = get_data (tahun, bulan) .days; untuk (var i = days; i <31; i ++) {daybox.children [i] .style.display = 'none'; }}; // Implementasi 4: Jika tanggal 30 atau 31 bulan ini adalah hari Minggu, baris baru akan ditempati. Move the newly occupied day to the first row by setting margin-top function move_day30(year,month){ //If the 30th of the month is Sunday if(get_data(year,month).day30week === 0){ day30.style.marginTop = parseInt(getCSS(day30,'height')) *(-5) + 'px'; day31.style.margintop = parseInt (getCss (day31, 'height')) *(-5) + 'px'; day31.style.margintop = parseInt (getCss (day31, 'height')) *(-5) + 'px'; day31.style.marginleft = getCss (day31, 'width'); kembali; } else {day30.style.margintop = day31.style.margintop = day31.style.marginleft = '0'; } // Jika tanggal 31 bulan ini adalah hari Minggu jika (get_data (tahun, bulan) .day31week === 0) {day31.style.margintop = parseInt (getCSS (hari31, 'tinggi')) *(-5) + 'px'; } else {day31.style.margintop = '0'; }} // Implementasi 5: Saat memuat halaman, dapatkan tahun dan bulan saat ini, tampilkan kalender bulan berjalan; Saat mengubah tahun atau bulan, dapatkan kalender tahun dan bulan yang diubah tahun var tahun = conyar.value = tanggal baru (). getlyear (); var month = conmonth.value = tanggal baru (). getMonth () + 1; move_day1 (tahun, bulan); hide_days (tahun, bulan); move_day30 (tahun, bulan); conyoner. CONYEAR.VALUE; var bulan = conmonth.value; if (tahun <1900 || tahun> 2100) {tahun = conyar.value = tanggal baru (). getlyear (); } if (bulan <1 || bulan> 12) {bulan = conmonth.value = tanggal baru (). getMonth () + 1; } move_day1 (tahun, bulan); hide_days (tahun, bulan); move_day30 (tahun, bulan);}Demonstrasi kode sumber
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.