最近、私はJSの日付に関するいくつかの機能を見て、突然カレンダー制御について考えました。だから私はそれを書こうとしました。バックグラウンドプログラマーとして、私は自分のレベルで制限されています。学習態度を取り、私が書いた例を見てみましょう。一緒に進歩しましょう！
まず、一般的に使用される日付関数：
日付（年、月、日）
var date = new Date（）;
年を取得します
var year = this.date.getTullyear（）;
月を取得してください、ここに毎月のインデックスがあるので、あなたは+1が必要です
var month = this.date.getMonth（）+1;
買収日は何日ですか
var day = this.date.getDate（）;
曜日を取得し、0。
var week = this.date.getDay（）;
その月にある曜日を手に入れましょう
var getWeekday = function（year、month、day）{var date = new Date（year、month、day）; return date.getDay（）; } var weekstart = getWeekday（this.year、this.month-1、1）月の日数を取得します
var getMonthdays = function（year、month）{var date = new Date（year、month、0）; return date.getDate（）; } var monthdays = this.getMonthdays（this.year、this.month）;さて、私たちは非常に多くのパラメーターしか使用していません。以下は、実際には、その週に対応する日付、動的スプライシングラベルに関するいくつかの操作と判断です。私が書いた例を直接投稿しましょう：
複製画像：
<html> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"> <head> <style type = "text/css"> td {center;} </style> <スクリプトタイプ= "テキスト/javascript" this.init.apply（this、arguments）; } calender.prototype = {init：function（container、options）{this.date = new date（）; this.year = this.date.getTullyear（）; 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）; this.options = options！= null？options：{border： '1px solid green'、width： '400px'、height： '200px'、backgroundcolor： 'lightgrey'、fontcolor： 'blue'}}、getmonthdays：function（year、month）{var date = new、month（year、mone、0）; return date.getDate（）; }、getWeekday：function（year、month、day）{var date = new Date（year、month、day）; return date.getDay（）; }、view：function（）{var tableesst = '<table>'; TableStr+= '<tr> <td colspan = "3"> </td> <td> year：'+this.year+'</td> <td colspan = "3">月：'+this.month+'</td> </tr>'; Tableestr+= '<tr> <td> day </td> <td> 2 </td> <td> 4 </td> <td> 5 </td> <td> 6 </td> </tr>'; var index = 1; //毎月初日がvar style = ''である場所を判断します。 if（this.weekstart <7）{tableestr+= '<tr>'; for（var i = 0; i <this.weekstart; i ++）{tableestr+= '<td> </td>'; }; for（var i = 0; i <7-this.weekstart; i ++）{style = this.day ==（i+1）？ "background-color：green;"： "";インデックス++; TableStr+= '<TD style = "'+style+'" val ='+（this.year+' - '+this.month+' - '+（i+1））+'>'+（i+1）+'</td>'; }; TableStr+= '</tr>'; } ///残りの日に対応する位置//整数行を判断し、対応する位置に対応するvar remaydays = this.monthdays-（7-this.weekstart）; var row = math.floor（remaindays％7 == 0？remaydays/7：（（remaindays/7）+1））; var count = math.floor（remaydays/7）; for（var i = 0; i <count; i ++）{tableestr+= '<tr>'; for（var k = 0; k <7; k ++）{style = this.day ==（index+k）？ "background-color：green;"： ""; TableStr+= '<td style = "'+style+'" "val ='+（this.year+' - '+this.month+' - '+（index+k））+'>'; tableestr+= index+k; tableStr+= ' remaycols = this.monthays-（index-1）; val = '+（this.year+' - '+this.month+' - '+（index）+'> '; TableStr+= index; TableStr+= '</td>';インデックス++; }; TableStr+= '</tr>'; TableStr+= '</table>'; TableStrを返します。 }、render：function（）{var candelardiv = 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 = 'red'; 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 tableestr = this.view（）; this.tablestr = tableestr; Calendardiv.innerhtml = TableStr; var div = document.createelement（ 'div'）; div.style.width = 'auto'; div.style.height = 'auto'; Div.AppendChild（CalenderDiv）; ///ページターンdiv var pagerdiv = document.createelement（ 'div'）; pagerdiv.style.width = 'auto'; pagerdiv.style.height = 'auto'; var that = this; ///パラメーターのリセットvar resetpara = function（year、month、day）{that.date = new Date（year、month、day）; that.year = that.date.getTullyear（）; 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）; that.monthdays = that.getMonthdays（that.year、that.month）; } //前のページvar prebtn = document.createelement（ 'input'）; prebtn.type = 'button'; prebtn.value = '<'; prebtn.onclick = function（）{that.containerdiv.removechild（div）; resetpara（that.year、that.month-2、that.day）; that.render（）; } //次のページvar nextbtn = document.createelement（ 'input'）; nextbtn.type = 'button'; nextbtn.value = '>'; nextbtn.onclick = function（）{that.containerdiv.removechild（div）; resetpara（that.year、that.month、that.day）; that.render（）; } pagerdiv.appendchild（prebtn）; pagerdiv.appendchild（nextbtn）; Div.AppendChild（PagerDiv）; var dropdiv = document.createelement（ 'div'）; var dropdivstr = ''; // select year dropdivstr+= '<select id = "ddlyear">'; for（var i = 1900; i <= 2100; i ++）{dropddivstr+= i == thit.year？ '<option value = "'+i+'" selected = "true">'+i+'</option>'： '<option value = "'+i+'">'+i+'</option>'; }; dropdivstr+= '</select>'; // select month dropdivstr+= '<select id = "ddlmonth">'; for（var i = 1; i <= 12; i ++）{dropddivstr+= i == thit. '<option value = "'+i+'" selected = "true">'+i+'</option>'： '<option value = "'+i+'">'+i+'</option>'; }; dropdivstr+= '</select>'; dropdiv.innerhtml = dropdivstr; div.AppendChild（dropdiv）; that.containerdiv.appendChild（div）; ///年と月を選択するイベントvar ddlchange = function（）{var ddlyear = document.getElementById（ 'ddlyear'）; var ddlmonth = document.getElementById（ 'ddlmonth'）; var yearindex = ddlyear.selectedIndex; var year = ddlyear.options [yearindex] .value; var monthindex = ddlmonth.selectedindex; var month = ddlmonth.options [monthindex] .value; that.containerdiv.removechild（div）; ResetPara（年、1か月目、Th.day）; that.render（）; } ddlyear.onChange = function（）{ddlChange（）; } ddlmonth.onchange = function（）{ddlchange（）; }}} var Calendar = new Calender（ 'dvtest'、{border： '1px solid緑'、幅： '400px'、height： '200px'、backgroundcolor： ''}）; calendar.render（）; } </script> </head> <body> <div id = "dvtest"> </div> </body> </html>IEのTableInnerHTMLの読み取り専用問題を解決するために、コードが再び変更され、ビューのテーブルはDIVに置き換えられます。さらに、構成可能性のためにオプションが追加されます。
上記のコードには簡単な説明があり、関数は最も基本的なものです。詳細に行うと、拡張できます。この記事がインスピレーションを与えることを願っています。