Baru -baru ini, saya melihat beberapa fungsi tentang tanggal JS dan tiba -tiba memikirkan kontrol kalender. Jadi saya mencoba menulis satu. Sebagai programmer latar belakang, saya terbatas di level saya. Mari kita ambil sikap belajar dan lihat contoh yang saya tulis. Mari belajar bersama untuk membuat kemajuan!
Pertama, fungsi tanggal yang umum digunakan:
Tanggal (tahun, bulan, hari)
var date = new date ();
Dapatkan tahun
var tahun = this.date.getlyear ();
Dapatkan bulan, inilah indeks bulanan sehingga Anda membutuhkan +1
var bulan = this.date.getMonth ()+1;
Hari apa tanggal akuisisi
var day = this.date.getDate ();
Dapatkan hari dalam seminggu, kembali 0. Minggu 1. Senin 2. Selasa 3. Rabu 4. Kamis 5. Jumat 6. Sabtu
var minggu = this.date.getday ();
Dapatkan hari apa dalam seminggu di bulan itu
var getWeekday = fungsi (tahun, bulan, hari) {var tanggal = tanggal baru (tahun, bulan, hari); return date.getday (); } var Weekstart = getWeekday (this.year, this.month-1, 1)Dapatkan jumlah hari dalam sebulan
var getMonthdays = fungsi (tahun, bulan) {var tanggal = tanggal baru (tahun, bulan, 0); return date.getDate (); } var monthdays = this.getMonthdays (this.year, this.month);Oke, kami hanya menggunakan begitu banyak parameter. Berikut ini sebenarnya adalah beberapa operasi dan penilaian tentang tanggal yang sesuai dengan minggu ini, label splicing dinamis. Mari langsung memposting contoh yang saya tulis:
Gambar reproduksi:
<html> <meta http-equiv="content-type" content="text/html;charset=utf-8"><head> <style type="text/css">td{ text-align: center;} </style> <script type="text/javascript"> window.onload=function(){ var Calender=function(){ this.init.apply (ini, argumen); } Calender.prototype = {init: function (wadah, opsi) {this.date = new date (); this.year = this.date.getlyear (); this.month = this.date.getMonth ()+1; this.day = this.date.getDate (); this.week = this.date.getday (); this.weekstart = this.getWeekday (this.year, this.month-1, 1); this.monthdays = this.getMonthdays (this.year, this.month); this.containerDiv = document.getElementById (container); ini.options = opsi! = null? Opsi: {border: '1px solid green', lebar: '400px', tinggi: '200px', latar belakangcolor: 'lightgrey', fontColor: 'blue'}}, getMonthdays: function (year, month) {var date = date baru, bulan, 0), 0); return date.getDate (); }, getWeekday: fungsi (tahun, bulan, hari) {var tanggal = tanggal baru (tahun, bulan, hari); return date.getday (); }, View: function () {var tableStr = '<able>'; tableStr+= '<tr> <td colspan = "3"> </td> <td> tahun:'+this.year+'</td> <td colspan = "3"> bulan:'+this.month+'</td> </tr>'; tableStr+= '<tr> <td> hari </td> <td> dua </td> <td> empat </td> <td> lima </td> <td> enam </td> </tr>'; indeks var = 1; // menilai di mana hari pertama setiap bulan adalah var style = ''; if (this.weekstart <7) {tableStr+= '<tr>'; untuk (var i = 0; i <this.weekstart; i ++) {tableStr+= '<td> </td>'; }; untuk (var i = 0; i <7-this.weekstart; i ++) {style = this.day == (i+1)? "Latar belakang-warna: hijau;": ""; indeks ++; tableStr+= '<td style = "'+style+'" val ='+(this.year+'-'+this.month+'-'+(i+1))+'>'+(i+1)+'</td>'; }; tableStr+= '</tr>'; } /// Posisi yang sesuai dengan hari-hari yang tersisa // menilai baris integer dan sesuai dengan posisi yang sesuai var sisa hari = this.monthdays- (7-this.weekstart); var row = math.floor (sisa hari%7 == 0? sisa hari/7: ((sisa hari/7) +1)); var count = math.floor (sisa hari/7); untuk (var i = 0; i <count; i ++) {tableStr+= '<tr>'; untuk (var k = 0; k <7; k ++) {style = this.day == (index+k)? "latar belakang-warna: green;": ""; tableStr+= '<td style = "'+style+'" "val ='+(this.year+'-'+this.month+'-'+(index+k))+'>'; tableStr+= indeks+k; tableStr+= '</td>';} posisi yang lebih lama; Remaincols = this.monthdays- (index-1); tableStr+= indeks; tableStr+= '</td>'; indeks ++; }; tableStr+= '</tr>'; TableStr+= '</able>'; mengembalikan TableStr; }, Render: function () {var calendardiv = document.createelement ('div'); calendardiv.style.border = this.options.border; calendardiv.style.width = this.options.width; calendardiv.style.height = this.options.height; calendardiv.style.cursor = 'pointer'; calendardiv.style.backgroundColor = this.options.backgroundColor; // calendardiv.style.color = this.options.fontcolor; calendardiv.style.color = 'merah'; calendardiv.onClick = function (e) {var evt = e || window.event; var target = evt.srcelement || evt.target; if (target && target.getAttribute ('val')) {alert (target.getAttribute ('val')); }} var tableStr = this.view (); this.tableStr = tableStr; calendardiv.innerhtml = tableStr; var div = document.createElement ('div'); div.style.width = 'auto'; div.style.height = 'auto'; Div.AppendChild (CalenderDiv); /// halaman putar div var pagerdiv = document.createelement ('div'); pagerdiv.style.width = 'auto'; pagerdiv.style.height = 'auto'; var itu = ini; /// Setel ulang parameter var resetpara = fungsi (tahun, bulan, hari) {that.date = tanggal baru (tahun, bulan, hari); that.year = that.date.getlyear (); that.month = that.date.getMonth ()+1; that.day = that.date.getDate (); that.week = that.date.getday (); that.weekStart = that.getWeekDay (that.year, that.month-1, 1); itu.Monthdays = that.getMonthdays (that.year, that.month); } // halaman sebelumnya var prebtn = document.createElement ('input'); prebtn.type = 'tombol'; prebtn.value = '<'; prebtn.onClick = function () {that.containerDiv.removechild (div); resetpara (that.year, that.month-2, that.day); itu.render (); } // halaman berikutnya var nextBtn = document.createElement ('input'); nextbtn.type = 'tombol'; nextbtn.value = '>'; nextBtn.onClick = function () {that.containerDiv.removechild (div); resetpara (that.year, that.month, that.day); itu.render (); } pagerDiv.AppendChild (prebtn); Pagerdiv.AppendChild (NextBtn); Div.AppendChild (PagerDiv); var dropDiv = document.createElement ('div'); var dropDivstr = ''; // pilih tahun dropDivST+= '<pilih id = "ddlyear">'; untuk (var i = 1900; i <= 2100; i ++) {dropDivStr+= i == that.year? '<opsi value = "'+i+'" dipilih = "true">'+i+'</tiption>': '<option value = "'+i+'">'+i+'</option>'; }; dropDivST+= '</pilih>'; // pilih bulan dropDivST+= '<pilih id = "ddlmonth">'; untuk (var i = 1; i <= 12; i ++) {dropDivStr+= i == itu. }; dropDivST+= '</pilih>'; dropDiv.innerHtml = dropDivSTR; Div.AppendChild (DropDiv); that.containerDiv.AppendChild (Div); /// Bind acara yang memilih tahun dan bulan var ddlchange = function () {var ddlyear = document.geteLementById ('ddlyear'); var ddlmonth = document.getElementById ('ddlmonth'); var yearindex = ddlyear.selectedIndex; var tahun = ddlyear.Options [yearindex] .value; var monthIndex = ddlmonth.selectectedIndex; var bulan = ddlmonth.Options [monthIndex] .value; that.containerDiv.removechild (div); resetpara (tahun, bulan-1, hari); itu.render (); } ddlyear.onchange = function () {ddlchange (); } ddlmonth.onchange = function () {ddlchange (); }}} var calendar = calender baru ('dvtest', {border: '1px solid green', lebar: '400px', tinggi: '200px', backgroundColor: ''}); calendar.render (); } </script> </head> <body> <v id = "dvtest"> </div> </body> </html>Kode telah diubah lagi dan tabel tampilan diganti dengan Div, untuk menyelesaikan masalah baca-saja dari TableInnerHtml IE. Selain itu, opsi ditambahkan untuk konfigurasi.
Kode di atas memiliki penjelasan sederhana, dan fungsinya adalah yang paling mendasar. Jika Anda melakukannya secara mendalam, Anda dapat memperluasnya. Saya harap artikel ini dapat memberi Anda beberapa inspirasi.