jsはカレンダーの簡単な計算方法を実現します。
最近はカレンダーでテキストの編集が必要なカレンダーがあります。データを結びつけるために、jsでカレンダーを書きました。
実装手順は以下の通りです。
1、まず処理月の総日数を取得する
JSはこのパラメータを提供しません。計算が必要です。うるう年の問題が2月の日数に影響することを考慮して、うるう年を判定する自己編集関数を作成します。
このように、毎月総数はこのように取得できます。m_days[x]ここで、xは0から11までの自然数である。
4、計算処理月の一日目は何曜日ですか?
Date関数のgetDayを使って取得できます。戻り値は0から6、0は月曜日、1は火曜日、2は水曜日、残りはこれに類推します。コードは以下の通りです。(2008年3月とすると)
5、カレンダー表を印刷する
2つのfor文を使って入れ子にして実行できます。外側の文は行を書き、内側の文はセルを書きます。
6、先月と来月
レンダリングするときは、古いカレンダーを削除して、新しいカレンダーを追加します。
実装手順は以下の通りです。
1、まず処理月の総日数を取得する
JSはこのパラメータを提供しません。計算が必要です。うるう年の問題が2月の日数に影響することを考慮して、うるう年を判定する自己編集関数を作成します。
function is_leap(year) {
return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
2、次に12ヶ月を含む月の総日数の配列を定義します。
m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31);
3、m_daysという配列の中で、2月の日数はすでにうるう年の情報に加入しています。28+is_leap。配列要素は0から始まり、JSが提供するDate関数が提供するget Monthの戻り値、すなわち0は1月、1は2月、2は3月を表し、これに類推する。このように、毎月総数はこのように取得できます。m_days[x]ここで、xは0から11までの自然数である。
4、計算処理月の一日目は何曜日ですか?
Date関数のgetDayを使って取得できます。戻り値は0から6、0は月曜日、1は火曜日、2は水曜日、残りはこれに類推します。コードは以下の通りです。(2008年3月とすると)
n1str=new Date(2008,3,1);
firstday=n1str.getDay();
月の総日数と今月の最初の日は曜日という既知の条件があれば、表の必要な行数の問題を解決できます。表関数には整数が必要です。したがって、Math.ceirを使って処理します。
tr_str=Math.ceil((m_days[mnow] + firstday)/7);
表のtrラベルは実際に表の行を表していますので、変数tr(u)strは私たちが下に表を書くための重要な根拠です。5、カレンダー表を印刷する
2つのfor文を使って入れ子にして実行できます。外側の文は行を書き、内側の文はセルを書きます。
for(i=0;i<tr_str;i++) { //
for(k=0;k<7;k++) { //
idx=i*7+k; //
date_str=idx-firstday+1; //
(date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; // ( 、 )
$(".date-info .date").last().append("<td class='day'>" + date_str + "</td>");
}
}
セルの自然番号が有効な日付を表しているかどうかは非常に重要です。フィルタリング機構を追加する必要があります。有効な日付だけを印刷します。有効な日付は0より大きいです。処理月の合計日数より小さいです。 6、先月と来月
if(mnow<=0){
mnow=11;
ynow=ynow-1;
}else{
mnow--;
}
if(mnow>=11){
mnow=0;
ynow=ynow+1;
}else{
mnow++;
}
先月取得した場合、1月までは注意が必要です。次の月を取得する時は、12月まで注意してください。レンダリングするときは、古いカレンダーを削除して、新しいカレンダーを追加します。
var nstr = new Date();
var ynow = nstr.getFullYear();
var mnow = nstr.getMonth();
var dnow = nstr.getDate();
var mnow_real = mnow;
calendar(nstr,ynow,mnow,dnow);
monDetail(ynow,mnow_real);
function monDetail(ynow,mnow){
mnow_real = mnow+1;
$(".month-detail").html(ynow+"-"+ mnow_real); //
}
function is_leap(year) { //
return (year%100==0?res=(year%400==0?1:0):res=(year%4==0?1:0));
}
function preMonth(){ //
console.log(mnow);
if(mnow<=0){
mnow=11;
ynow=ynow-1;
}else{
mnow--;
}
calendar(nstr,ynow,mnow,dnow);
monDetail(ynow,mnow);
}
function nextMonth(){ //
if(mnow>=11){
mnow=0;
ynow=ynow+1;
}else{
mnow++;
}
calendar(nstr,ynow,mnow,dnow);
monDetail(ynow,mnow);
}
function calendar(nstr,ynow,mnow,dnow){
$(".date-info tr.date").remove(); / ,
var nlstr = new Date(ynow,mnow,1); //
var firstday = nlstr.getDay(); //
var m_days=new Array(31,28+is_leap(ynow),31,30,31,31,30,31,30,31,30,31); //
var tr_str=Math.ceil((m_days[mnow] + firstday)/7); // +
var i,k,idx,date_str;
for(i=0;i<tr_str;i++) { //
$(".date-info tbody").append("<tr class='date'></tr>");
for(k=0;k<7;k++) { //
idx=i*7+k; //
date_str=idx-firstday+1; //
(date_str<=0 || date_str>m_days[mnow]) ? date_str=" " : date_str=idx-firstday+1; // ( 、 )
$(".date-info .date").last().append("<td class='day'>" + date_str + "</td>");
}
}
}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。