Tampilan Kalender, Pilihan, dll. Digunakan di banyak tempat di halaman web. Artikel ini menggunakan HTML, CSS, dan JavaScript untuk mengimplementasikan kalender sederhana. Setelah selesai, efeknya mirip dengan efek pada sisi kiri halaman. Anda dapat beralih ke bulan sebelumnya atau bulan depan. Ini juga dapat diperluas sesuai dengan kondisi aktual.
html
Bagian HTML relatif sederhana, menyatakan div, dan HTML spesifik dihasilkan menggunakan JavaScript. Konten keseluruhan kira -kira seperti ini:
<!doctype html><html><head> <meta charset='utf-8'> <link rel='stylesheet' href='External css file path' /> <title>demo</title></head><body> <div class='calendar' id='calendar'></div> <script type='text/javascript' src='External javascript file Path '> </script> </body> </html>
CSS
/*Pengaturan keseluruhan*/*{margin: 0px; padding: 0px;}/***Atur ukuran kalender*/. Kalender {lebar: 240px; Tinggi: 400px; Tampilan: blok;}/*** Atur kotak atas kalender*/. Kalender .calendar-title-box {position: relatif; Lebar: 100%; Tinggi: 36px; Line-Height: 36px; Teks-Align: tengah; Border-Bottom: 1px solid #ddd;}/*** Atur ikon tombol untuk bulan lalu*/. Kalender .prev-month {position: absolute; Atas: 12px; Kiri: 0px; Tampilan: blok inline; Lebar: 0px; Tinggi: 0px; Border-left: 0px; Border-Top: 6px Solid Transparent; Border-Right: 8px Solid #999; Border-Bottom: 6px Solid Transparent; Kursor: pointer;}/*** Setel ikon tombol bulan depan*/. Kalender .next-Month {position: absolute; Atas: 12px; Kanan: 0px; Tampilan: blok inline; Lebar: 0px; Tinggi: 0px; Border-Right: 0px; Border-Top: 6px Solid Transparent; Border-left: 8px Solid #999; Border-Bottom: 6px Solid Transparent; Kursor: pointer;}/* Setel gaya tabel kalender*/. Kalender-tabel {lebar: 100%; Border-Collapse: runtuh; Text-Align: Center;}/* Tinggi Garis Tabel*/. Calendar-Table Tr {Height: 30px; Line-height: 30px;}/* Tampilan khusus warna hari ini*/. Currentday {color: red;}/* Warna teks bulan ini*/. Currentmonth {color: #999;}/* Warna bulan lainnya*/. Othermonth {color: #EDE;}Pada dasarnya tidak ada yang bisa dikatakan tentang pengaturan gaya, beberapa pengaturan sederhana. Misalnya, yang khusus adalah ikon yang mewakili "bulan lalu" dan "bulan depan", yang mengadopsi posisi absolut dan menggunakan atribut perbatasan dalam CSS untuk mengatur gaya.
Objek Tanggal JavaScript
Sebelum memulai kode JS formal, Anda perlu memahami objek tanggal di JS. Melalui objek tanggal, Anda dapat memperoleh informasi seperti perangko tahun, bulan, hari, waktu, dan waktu. Untuk referensi tertentu: http://www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = tanggal baru (); // Dapatkan waktu sistem saat ini waktu saya saat ini adalah Senin, 25 April 2016 D1.getlyEar (); // Dapatkan informasi tahunan, 2016 d1.getmonth (); // Dapatkan informasi bulanan (mulai dari 0: 0-11) 3 d1.getDate (); // Dapatkan informasi hari di sini hasilnya: 25 d1.getday (); // Dapatkan informasi mingguan (0-6) di sini hasilnya: 1
Anda juga dapat mengatur informasi tahun, bulan dan tanggal secara langsung selama inisialisasi
# Set 15 Maret 2016 var D2 = Tanggal Baru (2016, 2, 15); // Bulan dihitung dari 0, dan Anda perlu mengurangi satu d2.getlearear (); // 2016 d2GetMonth (); // 2 d2.getDate (); // 15 d2.tolocaledateString (); // "2016/3/15" membuktikan bahwa pengaturannya benar
Kalender melibatkan masalah seperti berapa hari per bulan. Ini sangat sederhana di JS. Jika tahun, bulan dan hari ditetapkan, jika melebihi bulan berjalan, JS akan secara otomatis menghitung bulan berikutnya. Misalnya, April hanya memiliki 30 hari. Jika diatur ke 31, jenis tanggal yang diperoleh akan secara otomatis menghitung 1 Mei. Jika diatur ke 0, JS akan memprosesnya sebagai 30 April, maka 1 Mei adalah 29 April.
var d3 = tanggal baru (2016, 3, 30); d3.tolocaledateString (); // "2016/4/30" var d4 = Tanggal baru (2016, 3, 31); d4.tolocaledateString (); // "2016/5/1" var d5 = Tanggal baru (2016, 3, 33); d5.tolocaledateString (); // "2016/5/3" var d6 = tanggal baru (2016, 4, 1); d6.tolocaledateString (); // "2016/5/1" var d7 = Tanggal baru (2016, 4, 0); d7.tolocaledateString (); // "2016/4/30" var d8 = tanggal baru (2016, 4, -3); d8.tolocaledateString (); // "2016/4/27"
Javascript
Setelah memahami penggunaan dasar objek tanggal di JS, langkah selanjutnya adalah bagian implementasi kode. Gagasan keseluruhannya adalah sebagai berikut: Tentukan variabel DateBJ global untuk mencatat informasi tahun dan bulan yang perlu ditampilkan dalam tabel. Konten dalam judul diambil berdasarkan DateObj. Tanggal dalam tabel mengambil semua informasi No. 1 yang sesuai dengan tahun dan bulan di DateObj, dan kemudian menentukan posisi No. 1 di baris pertama tabel, sehingga dapat membalikkan data beberapa hari terakhir bulan sebelumnya, dan data bulan ini dan bulan depan didorong kembali.
Langkah -langkah spesifik:
1. Deklarasikan variabel DateObj dan tetapkan nilai awal ke waktu sistem saat ini
2. Render elemen html di Calendar Div
3. Dapatkan informasi pada tanggal 1 bulan ini melalui DateObj dan gunakan untuk melintasi semua tanggal dalam tabel.
4. Bind events untuk bulan sebelumnya dan ikon bulan depan
(function(){ /* * Used to record dates. When displayed, it will be displayed according to the year and month of the date in dateObj*/ var dateObj = (function(){ var _date = new Date(); // Default is the current system time return { getDate : function(){ return _date; }, setDate : function(date) { _date = date; } }; }); Document.createElement ("Div"); // Judul Menyetel Judul Bulan Sebelumnya Bodybox = Document.Createelement ("Div"); class = 'calendar-title' id = 'calendArtitle'> </span> " +" <span id = 'nextmonth' class = 'next-month'> </span> "; calendar.appendChild (titlebox); // Tambahkan ke Calendar div // setrek html dari bodybox Area Bodybox.classname = 'calendar ='H = "<Th> </t>" + "<t th> satu </t>" + "<th> dua </t>" + "<the> tiga </t>" + "<t th> empat </t>" + "<tum </th>" MAXIMLE (MAXIMUM, AKUM APIME. " ditempati dalam satu bulan untuk (var i = 0; i <6; i ++) {_bodyHtml + = "<tr>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + "<td> </td> </td>" + " +" </td> "</td" </td> " +" + " "<td> </td>" + "<td> </td>" + "<td> </td>" + "</tr>"; Calendar.AppendChild (BodyBox); Informasi dalam judul teratas var calendartitle = document.geteLementById ("calendartitle"); var _tds = _table.getElementsbyTagname ("td"); _firstday.getday ()); getDateStr (tanggal baru ())) {// day_tds saat ini [i] .classname = 'saat ini'; Bulan_tds [i] .className = 'Othermonth'; 'Klik', Tonextmonth); etype (e) {func (e);}); date.getmonth () - 1, 1)); menjadi string, tahun 4-bit + 2-bit + 2-bit hari*/ fungsi getDateTestre (tanggal) {var _ear = date.getlyEar (); = (_d> 9)?Dalam contoh ini, acara saat mengklik tanggal dalam tabel tidak ditambahkan. Anda dapat menambahkan kode berikut ke fungsi BindEvent untuk mendapatkan informasi tentang tanggal yang diklik.
var table = document.geteLementById ("calendArtable"); var tds = table.geteLementsbyTagname ('td'); for (var i = 0; i <tds.length; i ++) {addEvent (tds [i], 'klik', fungsi (e) {console.log (e.target.getTribute (} {e) {console) {console) {console (e.target.getTribute (e) {e) {console) {console (e.target.get.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.