最近、私は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に置き換えられます。さらに、構成可能性のためにオプションが追加されます。
上記のコードには簡単な説明があり、関数は最も基本的なものです。詳細に行うと、拡張できます。この記事がインスピレーションを与えることを願っています。