このコードは簡潔かつ明確であり、誰もが共有するのに適していると思うため、特に投稿します。 ×××××××関数定義部分 コードをコピー コードは次のとおりです。 <br>var $ = function (id) { <br>return "string" == typeof id ? <br>}; <br>var Class = { <br>create: function() { <br>return function() { <br>this.initialize.apply(this, argument); <br>} <br>} <br>var Extend = function(destination, source) { <br>for (source の var プロパティ) { <br>destination[property] = source[property] <br>} <br>return destination; <br> } <br>var Calendar = Class.create(); <br>Calendar.prototype = { <br>initialize: function(container, options) { <br>this.Container = $(container);// container(table Structure) <br>this.Days = [];//日付オブジェクトのリスト <br>this.SetOptions(options); <br>this. Year = this.options. Year || new Date()。 getFull Year(); <br>this.Month = this.options.Month || new Date().getMonth() 1; <br>this.SelectDay = this.options.SelectDay ? : null; <br>this.onSelectDay = this.options.onSelectDay; <br>this.onFinish = this.options.onFinish; ; <br> }, <br>//デフォルトの属性を設定します<br>SetOptions: function(options) { <br>this.options = {//デフォルト値<br>年: 0,//年を表示します<br>Month: 0, //月を表示<br>SelectDay: null,//日付を選択<br>onSelectDay: function(){},//選択した日付でトリガー<br>onToday: function(){},/ /今日の日付でトリガー<br>onFinish: function(){}//カレンダーの描画後にトリガー<br>}; <br>Extend(this.options, options || {}); 🎜>//今月<br>NowMonth: function() { <br>this.PreDraw(new Date()); <br>}, <br>//前月<br>PreMonth: function() { <br>this.PreDraw( new Date(this. Year, this.Month - 2, 1)); <br>}, <br>//来月<br>NextMonth: function() { <br>this.PreDraw (new Date(this . Year, this.Month, 1)); <br>}, <br>//前年<br>Pre Year: function() { <br>this.PreDraw(new Date(this. Year) - 1, this .Month - 1, 1)); <br>}, <br>//来年<br>Next Year: function() { <br>this.PreDraw(new Date(this.年 1, this .Month - 1, 1)); <br>}, <br>//日付に基づいてカレンダーを描画します<br>PreDraw: function(date) { <br>//プロパティを再度設定します<br>これ。 Year = date.getFull Year() ; this.Month = date.getMonth() 1; <br>//カレンダーを再描画します<br>this.Draw(); <br>//カレンダーを描画します<br>Draw: function() { <br>//日付リストの保存に使用されます<br>var arr = [] <br>//週の最初の日の日付値を使用します月の最初の日からの日数<br>for(var i = 1, firstDay = new Date(this. Year, this.Month - 1, 1).getDay(); i //月の最後の日を月の日数として使用します <br>for(var i = 1, monthDay = new Date(this. Year, this.Month, 0).getDate(); i //元の日付オブジェクトのリストをクリアします<br>。 Days = []; //日付を挿入<br>var frag = document.createDocumentFragment(); <br>while(arr.length){ <br>//各週の tr を挿入 <br>var row = document.createElement("tr"); <br>//各週は 7 日あります<br>for (var i = 1; i var cell = document.createElement ("td"); cell.innerHTML = " "; <br>if(arr.length){ <br> var d = arr.shift(); <br>if(d){ <br>cell.innerHTML = d; <br>this.Days[d] = cell; <br>var on = new Date(this. Year , this.Month - 1, d) <br>//今日であるかどうかを判断します<br>this .IsSame(on, new Date()) && this.onToday(cell); <br>//日付を選択するかどうかを判断します<br>this.SelectDay && this.IsSame(on, this.SelectDay) && this.onSelectDay (cell); <br>} <br>} <br>row.appendChild(cell); <br>frag .appendChild(row) <br>} <br>// 最初にコンテンツをクリアしますそれを挿入します (つまり、テーブルは innerHTML を使用できません) <br>while(this.Container.hasChildNodes()){ this.Container.removeChild(this.Container.firstChild) } <br>this.Container.appendChild(frag); <br>//プログラムを追加します<br>this.onFinish(); <br>}, <br>//同じ日かどうかを判断します<br>IsSame: function(d1, d2) { <br>return ( d1.getFullyear() == d2.getFullyear() && d1.getMonth() == d2.getMonth() && d1.getDate() == getDate()); > ×××××××× スタイルシートの定義コードをコピー コードは次のとおりです: <br>.Calendar { <br>font-family:Verdana; <br>フォントサイズ:12px; <br>背景色:#e0ecf9; <br>text-align:center; <br>幅:400ピクセル; <br>高さ:180ピクセル; <br>パディング:10px; <br>行の高さ:1.5em; <br>} <br>.カレンダー a{ <br>color:#1e5494; <br>} <br>.カレンダー テーブル{ <br>幅:100%; <br>ボーダー:0; <br>} <br>.カレンダー テーブル thead{color:#acacac;} <br>.カレンダー テーブル td { <br>font-size: 11px; <br>パディング:1px; <br>} <br>#idCalendarPre{ <br>カーソル:ポインタ; <br>浮動小数点:左; <br>パディング右:5px; <br>} <br>#idCalendarNext{ <br>カーソル:ポインタ; <br>float:right; <br>パディング右:5px; <br>} <br>#idCalendar td.onToday { <br>font-weight:bold; <br>カラー:#C60; <br>} <br>#idCalendar td.onSelect { <br>font-weight:bold; <br>} <br>#buttonposition{ <br>margin-left: 10%; <br>} <br> ***********下は使用する本体部分です 复制代代码如下: << >> 年 月 日 一 二 三 四 五 六 頭> <スクリプト言語="JavaScript"> var cale = new Calendar("idCalendar", { onToday: function(o){ o.className = "onToday"; }, onFinish: function(){ $("idCalendar Year ").innerHTML = this. Year; $("idCalendarMonth").innerHTML = this.Month; } }); $("idCalendarPre").onclick = function(){ cale.PreMonth(); } $("idCalendarNext").onclick = function(){ cale.NextMonth(); $("idCalendarPre Year").onclick = function(){ cale.Pre Year(); $("idCalendarNext Year").onclick = function(){ cale.Next Year(); $("idCalendarNow").onclick = function(){ cale.NowMonth(); }