JavaScript - シンプルなカレンダーの実装と Date オブジェクト構文の紹介 (画像付き)_JavaScript スキル

知識ポイント:

主に Date オブジェクトの使用法。 (以下の紹介文はインターネットからのものです)

Date オブジェクトを作成するための構文:
var myDate=new Date()
Date オブジェクトは現在のデータを自動的に保存します。初期値として日付と時刻が設定されます。
次の 5 つのパラメータ形式があります:
new Date("month dd,yyyy hh:mm:ss");
new Date("month dd,yyyy"); yyyy ,mth,dd,hh,mm,ss);
new Date(yyyy,mth,dd);

注: 最後の形式はパラメータを表します。は、作成される時刻と 1970 年 1 月 1 日の GMT 時刻との差のミリ秒数です。


パラメータ
の意味は次のとおりです。 month: 1 月から 12 月までの英語の月の名前を示します。

mth: (1 月) から 11 月 (12 月) までの整数で月を示します

dd: 1 から 31 までの月の日を示します

yyyy: 4 桁の年

hh: 時間数、0 (午前 0 時) ～ 23 (午後 11 時)

mm: 分数、0 ～ 59 の整数

ss: 秒数、から0 ～ 59 整数

ms: ミリ秒、0 以上の整数


Date オブジェクトのメソッド:
getDate() 1 を返しますDate オブジェクトからの月 日 (1 ～ 31) のいずれか。
getDay() は、Date オブジェクトから曜日 (0 ～ 6) を返します。
getMonth() は、Date オブジェクトから月 (0 ～ 11) を返します。
getFull Year() Date オブジェクトから年を 4 桁の数値として返します。
getyear() 代わりに getFullyear() メソッドを使用してください。
getHours() は、Date オブジェクトの時間 (0 ～ 23) を返します。
getMinutes() は、Date オブジェクトの分 (0 ～ 59) を返します。
getSeconds() は、Date オブジェクトの秒 (0 ～ 59) を返します。
getMilliseconds() は、Date オブジェクトのミリ秒 (0 ～ 999) を返します。
getTime() は、1970 年 1 月 1 日からのミリ秒数を返します。
getTimezoneOffset() は、現地時間とグリニッジ標準時 (GMT) の差を分単位で返します。
getUTCDate() 世界時に基づいて Date オブジェクトから月の日 (1 ～ 31) を返します。
getUTCDay() 世界時に基づいて Date オブジェクトから曜日 (0 ～ 6) を返します。
getUTCMonth() は、世界時に基づいて Date オブジェクトから月 (0 ～ 11) を返します。
getUTCFul Year() 世界時に基づいて Date オブジェクトから 4 桁の年を返します。
getUTCHours() は、世界時に従って Date オブジェクトの時間 (0 ～ 23) を返します。
getUTCMinutes() は、世界時に従って Date オブジェクトの分 (0 ～ 59) を返します。
getUTCSeconds() は、世界時に従って Date オブジェクトの秒 (0 ～ 59) を返します。
getUTCMilliseconds() は、世界時に従って Date オブジェクトのミリ秒 (0 ～ 999) を返します。
parse() は、1970 年 1 月 1 日の午前 0 時から指定された日付 (文字列) までのミリ秒数を返します。
setDate() は、Date オブジェクトに日付 (1 ～ 31) を設定します。
setMonth() は、Date オブジェクトに月 (0 ～ 11) を設定します。
setFull Year() は、Date オブジェクトに年 (4 桁) を設定します。
set Year() 代わりに setFull Year() メソッドを使用してください。
setHours() は、Date オブジェクトの時間 (0 ～ 23) を設定します。
setMinutes() は Date オブジェクトに分 (0 ～ 59) を設定します。
setSeconds() は、Date オブジェクトの秒 (0 ～ 59) を設定します。
setMilliseconds() は、Date オブジェクトにミリ秒 (0 ～ 999) を設定します。
setTime() は、Date オブジェクトをミリ秒単位で設定します。
setUTCDate() 世界時に従って Date オブジェクトに月の日 (1 ～ 31) を設定します。
setUTCMonth() は、世界時に従って Date オブジェクトの月 (0 ～ 11) を設定します。
setUTCFul Year() 世界時に従って Date オブジェクトに年 (4 桁) を設定します。
setUTCHours() 世界時に従って Date オブジェクトの時間 (0 ～ 23) を設定します。
setUTCMinutes() 世界時に従って Date オブジェクトの分 (0 ～ 59) を設定します。
setUTCSeconds() 世界時に従って Date オブジェクトの秒 (0 ～ 59) を設定します。
setUTCMilliseconds() 世界時に従って Date オブジェクトのミリ秒 (0 ～ 999) を設定します。
toSource() はオブジェクトのソース コードを返します。
toString() Date オブジェクトを文字列に変換します。
toTimeString() Date オブジェクトの時刻部分を文字列に変換します。
toDateString() Date オブジェクトの日付部分を文字列に変換します。
toGMTString() 代わりに toUTCString() メソッドを使用してください。 1 3
toUTCString() 世界時に従って Date オブジェクトを文字列に変換します。
toLocaleString() 現地時間形式に従って Date オブジェクトを文字列に変換します。
toLocaleTimeString() Date オブジェクトの時刻部分を現地時間形式に従って文字列に変換します。
toLocaleDateString() Date オブジェクトの日付部分を現地時間形式に従って文字列に変換します。
UTC() 世界時に従って、1997 年 1 月 1 日から指定された日付までのミリ秒数を返します。
valueOf() は、Date オブジェクトの元の値を返します。
var objDate=new Date([引数リスト]);


単純なカレンダーの実装:
効果:


コード:

コードをコピー コードは次のとおりです:

#calendar{
フォントサイズ: 12px;
}
#calendar tbody td{
background:#033;
色: #fff;
text-align: 中央;
パディング: 2px;
}
.detail{
text-align:center;
}

测试值：

上一月
次の月
上一年
下一年
今天

var Calendar=function(year,monthNum,parent){
this.year=year;
this.parent=親;
this.monthNum=monthNum-1;
function isLeap Year(y){
return (y>0)&&!(y%4)&&((y 0)||!(y@0));
}
this.numDays=[31,isLeap Year(this.year)?29:28,31,30,31,30,31,31,30,31,30,31][this.monthNum] ;
this.weekDays=["日","一","二","三","四","五","六"];
this.nowDate=新しい日付;
this.init();
}

Calendar.prototype={
setMonthNum:function(monthNum){
this.monthNum=monthNum-1;
},
getMonthNum:function(){
return this.monthNum 1;
},
setyearNum:function(year){
this.year=year;
},
get YearNum:function(){
return this.year;
},
init:function(){
this.setup(this.parent);
},
reflesh:function(){
this.setup(this.parent);
},
setup:function(id){
var date=this.nowDate;
var cal=document.getElementById(id);
cal.innerHTML="";
var calDiv=document.createElement("div");
var tab=document.createElement("テーブル");
cal.appendChild(calDiv);
calDiv.innerHTML=this.getsummary();
cal.appendChild(タブ);
calDiv.className="detail"
this.thead=document.createElement("thead");
this.tbody=document.createElement("tbody");
this.tfoot=document.createElement("tfoot");
this.tr=document.createElement("tr");
this.td=document.createElement("td");

tab.appendChild(this.thead);
tab.appendChild(this.tbody);
this.setThead();
this.create();

},
setThead:function(){
var day=this.weekDays;
var tr=this.tr.cloneNode(true);
this.thead.appendChild(tr);
for(var i=0;ivar td=this.td.cloneNode(true);
tr.appendChild(td);
td.innerHTML=day[i];
}
},
create:function(){
var day=new Date(this.year,this.monthNum,1);
var tr=this.tr.cloneNode(true);
var dayCount=this.numDays;
var that=this;

that.tbody.appendChild(tr);
for(var j=0;jvar td=that.td.cloneNode(true);
tr.appendChild(td);
td.innerHTML=" ";
}
for(var i=1;iif((j i)%7-1==0){
tr=that.tr.cloneNode(真実）;
that.tbody.appendChild(tr);
}
var td=that.td.cloneNode(true);
var s=i;
if(i==that.nowDate.getDate()){
s=""私は「」;
}
td.innerHTML=s;
td.style.cursor="ポインター";
td.onclick=function(){
document.getElementById("calendar_value").value=(that.get YearNum() "/" that.getMonthNum() "/" this.innerHTML)
}
td.onmouseover=function(){
this.style.background="#fff";
this.style.color="#033"
}
td.onmouseout=function(){
this.style.background="";
this.style.color="#fff"
}
tr.appendChild(td);
}
},
getsummary:function(){
var date=this.nowDate;
return this.year "年" (this.monthNum 1) "月" date.getDate() "日";
}
}
var cal=new Calendar(2013,5,"calendar");
cal.init();

document.getElementById("cal_prev").onclick=function(){
cal.monthNum--;
if(cal.getMonthNum()cal.setMonthNum(12);
暦年--;
}
cal.refresh();
}
document.getElementById("cal_next").onclick=function(){
cal.monthNum
if(cal.getMonthNum()>12){
cal.setMonthNum( 1);
暦年;
}
cal.refresh();
}
document.getElementById("cal_today").onclick=function(){
cal.set YearNum((new Date).getFull Year());
cal.setMonthNum((新しい日付).getMonth() 1)
cal.reflesh();
}
document.getElementById("cal_preyear").onclick=function(){
cal.set YearNum(cal.get YearNum()-1);
cal.refresh();
}
document.getElementById("cal_nextyear").onclick=function(){
cal.setyearNum(cal.getyearNum() 1);
cal.refresh();
}

総括:
以上のコードが追加されていないため、重要な点が書き込まれています。