私は最近プロジェクトを急いでいます。プロジェクトは最終的に安定した状態になりました。バックグラウンドプログラマーとして、私は本当に大変です。 Webからモバイルインターフェイスまですべてを書く必要があります。これは多くのことです。 。 。私はついに2日間アイドル状態になりました。私は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（年、月、日）;
return date.getDay（）;
}
var weekstart = getWeekday（this.year、this.month-1、1）
月の日数を取得します
コードコピーは次のとおりです。
var getMonthdays = function（year、month）{
var date = new Date（年、月、0）;
return date.getDate（）;
}
var monesddays = this.getMonthdays（this.year、this.month）;
さて、私たちは非常に多くのパラメーターしか使用していません。以下は、実際には、その週に対応する日付、動的スプライシングラベルに関するいくつかの操作と判断です。私が書いた例を直接投稿しましょう：
コードコピーは次のとおりです。
<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（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：{
境界線： '1px Solid Green'、
幅： '400px'、
高さ： '200px'、
BackgroundColor：「LightGrey」、
fontcolor：「青」
}
}、
GetMonthdays：function（year、month）{
var date = new Date（年、月、0）;
return date.getDate（）;
}、
GetWeekday：function（year、month、day）{
var date = new Date（年、月、日）;
return date.getDay（）;
}、
表示：function（）{
var tableestr = '<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> one </td> <td> 2つの</td> <td> 3 </td> <td> five </td> <td> 6 </td> </tr>';
var index = 1;
//毎月の最初の日はどこにあるかを判断します
var style = '';
if（this.weekstart <7）
{
TableStr+= '<tr>';
for（var i = 0; i <this.weekstart; i ++）{
TableStr+= '<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 remaindays = 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 ++）{
TableStr+= '<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）+'>';
TableStr+= index+k;
TableStr+= '</td>';
};
TableStr+= '</tr>';
インデックス+= 7;
};
//最後の残りの日の対応する位置（1週間の日に記入することはできません）
var repaycols = this.monthdays-（index-1）;
TableStr+= '<tr>';
for（var i = 0; i <regaincols; i ++）{
style = this.day == index？ "background-color：green;"： "";
TableStr+= '<TD style = "'+style+'" 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（年、月、日）;
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 = '';
// yearを選択します
DROPDIVSTR+= '<SELECT ID = "DDLYEAR">';
for（var i = 1900; i <= 2100; i ++）{
dropdivstr+=
i == that.year
？ '<option値= "'+i+'" selected = "true">'+i+'</option>'
： '<option value = "'+i+'">'+i+'</option>';
};
dropdivstr+= '</select>';
//月曜日を選択します
dropdivstr+= '<select id = "ddlmonth">';
for（var i = 1; i <= 12; i ++）{
dropdivstr+=
i == that.month
？ '<option値= "'+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か月目、その.day）;
that.render（）;
}
ddlyear.onchange = function（）{
ddlchange（）;
}
ddlmonth.onchange = function（）{
ddlchange（）;
}
}
}
var Calendar = new Calender（ 'dvtest'、{
境界線： '1px Solid Green'、
幅： '400px'、
高さ： '200px'、
BackgroundColor： ''
}
）;
calendar.render（）;
}
</script>
</head>
<body>
<div id = "dvtest"> </div>
</body>
</html>
IEのTableInnerHTMLの読み取り専用問題を解決するために、コードが再び変更され、ビューのテーブルはDIVに置き換えられます。さらに、構成可能性のためにオプションが追加されます。
上記のコードには簡単な説明があり、関数は最も基本的なものであり、より詳細に行うと、展開できます。