私はいつもJavaScriptでカレンダーを書きたいと思っていましたが、良いアイデアがまったくないので、長い間試していませんでした。最近、私はたまたまインターネット上のJavaScriptで書かれた簡単なカレンダーの例を見ました。コードは大きくありませんが、JSカレンダーの実装原則をよく説明していると思います。私も試してみて、たくさん手に入れました。基本的な実装原則を習得した後、機能を追加して自由に再生できます。ここで最初に共有させてください。興味があれば試すことができます！
1。テーブル行数の問題
日付のテーブルを表示したいので、まずこのテーブルにある行と列があるかを知る必要があります。列の数は決定されており、日曜日から土曜日までの合計7列（カレンダーの最初の列は日曜日）です。行数の問題を解決する前に、毎月の最初の日はカレンダーの日曜日から始まっていないため、最初に月の最初の日がある日かを知る必要があります。金曜日と土曜日かもしれないので、1番目の左部分は空のテーブルに置き換える必要があります。では、代わりにいくつの空のテーブルを使用する必要がありますか？ここでは、getDay（）メソッドを使用する必要があります。GetDay（）メソッドは、配列[0-6]の数字を返し、0は日曜日、1は月曜日、2つは火曜日を代表するなどを表します。したがって、月の1か月が金曜日の場合、左側にそれらを交換するために5つの空のフォームが必要です。その後、1か月に31日がある場合、最後の行数は次のとおりです。
var tr_nums = math.ceil（（5 + 31）/7）;
もちろん、毎月が31日ではないので、12か月の配列を作成する必要があります。各要素は毎月の日数を表します。ただし、2月は非常に特別です。 2月にはうるう年には29日間、2月には通常の年にわずか28日です。したがって、配列を作成する前に、自分で何年も跳躍することを判断する関数を作成する必要があります。
//現在の年が4で割り切れることができますが、100で割り切れることができない場合、または400で割り切れることができない場合、それはLeap Year、Return 1、それ以外の場合は0機能ISLEAP（年）を返すことができます{return Year 4 == 0？ （年％100！= 0？1 ：（年％400 == 0？1：0））：0;}次に、数か月の配列を作成します。
var days_per_month = new Array（31、28 + isLeap（year）、31、30、31、30、31、31、30、31）;
これにより、通常の年とうるう数の両方で正しい日数が奪われることが保証されます。次のコードは、今日の関連情報を取得するために使用されます。
var today = new date（）、//初日=新しい日付（y、m、1）、//月の最初の日を取得しますdayofweek = firstday.getday（）、//曜日を判断（[0-6]の1つに戻る[0-6]、0は月曜日を表す1つ）
そのため、最終的には、月に必要なテーブルの行数を取得できます。
var str_nums = math.ceil（（dayofweek + days_per_month [m]） / 7）; //日付テーブルに必要な行数を決定する
2。カレンダーテーブルを印刷します
テーブル自体は2次元配列ですので、マスターを出して2つのループを実行して完了します。コードは次のとおりです。
for（i = 0; i <str_nums; i += 1）{//ループの最初のレイヤーはtr tag document.write（ '<tr>'）を作成します; for（k = 0; k <7; k ++）{//ループの2番目のレイヤーは、tdタグvar idx = 7 * i+kを作成します。 //各テーブルのインデックスを作成し、0から始まるvar date = idx -dayofweek + 1; //月の1日を週と一致させる//何か他のことをする} document.write（ '</tr>'）; }3.完全なJSカレンダーコードを添付します
<script> //現在の年が跳躍年であるかどうかを判断します（2月には29日間、通常の年の2月に28日しかありません）関数ISLEAP（年）{戻り年％4 == 0？ （年％100！= 0？1 ：（年％400 == 0？1：0））：0; } var i、k、today = new date（）、//日付のテーブル）1日=新しい日付（y、m、1）、//月の初日を取得しますdayofweek = firstday.getday（）、//曜日を判断します（[0-6]で1つを返す、0は月曜日を表します。 31、31、30、31、30、31、31、30、31、30、31）、//月アレイstr_nums = math.ceil（（dayofweek + days_per_month [m]） /7）; //日付のテーブルドキュメントに必要な行の数を決定します。 //テーブルの最初の行（i = 0; i <str_nums; i += 1）{//日付のテーブルdocument.write（ '<tr>'）を作成する（i = 0; i <str_nums; i += 1）を印刷します。 for（k = 0; k <7; k ++）{var idx = 7 * i+k; //各テーブルのインデックスを作成し、0から始まるvar date = idx -dayofweek + 1; //月の1週間を週と一致させます（日付<= 0 ||日付> days_per_month [m]）？ date = ''：date = idx -dayofweek + 1; //インデックスは月の最大値よりも0以下です。日付== Dの代わりに空のテーブルを使用しますか？ document.write（ '<td>' + date + '</td>'）：document.write（ '<td>' + date + '</td>'）; //日を強調表示} document.write（ '</tr>'）; } document.write（ '</table>'）; </script>CSSパートで自由にプレイしましょう。現在の時刻は2016年5月2日で、レンダリングは次のとおりです。
上記の記事「JSの執筆日に対するシンプルなカレンダーの効果」は、私があなたと共有するすべてのコンテンツです。参照を提供できることを願っています。wulin.comをもっとサポートできることを願っています。