前の言葉
簡単なカレンダーは、JavaScriptの日付オブジェクトの一般的なアプリケーションであり、幅広い用途があります。この記事では、簡単なカレンダーの実装アイデアを詳細に説明します。
効果デモンストレーション
HTML説明
タイプ=番号の2つの入力をそれぞれ年度と月の入力コントロールとして使用して、調整ボタンがAdvanced Browserに含まれるようにします
日曜日から月曜日までの週を整理します
<div> <header class = 'control'> <input id = "conyear" type = "min =" 1900 "max =" 2100 "step =" 1 "/> <input id =" conmonth "type =" number "min =" 1 "1" max = "12" step = "1"/>> </header> <header = 'div </div </div </div < <div> tue </div> <div>木曜日</div> <div>金曜日</div> <div>土曜日</div> </header> <section id = 'daybox'> <div = "day1"> 1 </div> <div> 2 </div> 3 </div> <div> 4 </div> div </div </div </div </div </div </div </div </div </div </div </div> <div> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> 16 </div> div> 17 </div> <div> div> 18 </div> </div> <div> div> div </div> 22> 22> 22> 22 </div> div> div> div> div> div> div> div> div> div> div> div> div> div> viv> <div> 23 </div> <div> 24 </div> <div> 25 </div> <div> 26 </div> <div> 27 </div> <div> 28 </div> <div> <div> <div> <div> <div> <div> <day30 "> 30 </div> <div id =" day31 "> div> </section
CSSの説明
簡単なカレンダーを実装するには、最初にカレンダー内のclass = "day"のdivの配置を決定します。これにより、同じレベルのすべてのdivが、初日Divの位置を変更することにより、動きに従うことができます。
ボディ{マージン：0;} input {border：none;パディング：0;}。box {width：354px;マージン：30px auto 0; } .datebox {height：300px;ボーダー：2px Solid Black;} .Week {Overflow：Hidden;境界線：1pxソリッドブラック。 Line-Height：49px;}。week-in {height：49px;フロート：左;幅：50px; TEXT-ALIGN：center;}。daybox {overflow：hidden;}。day {float：left;高さ：50px;幅：50px;フォント：20px/50px 'Microsoft yahei';テキストアライグ：center;}。コントロール{オーバーフロー：hidden;}。con-in {height：50px;フロート：左;幅：100px;テキストアライグ：センター;フォント：20px/50px "Microsoft yahei";}JS説明
簡単なカレンダーのJSロジックには、合計5つの実装が必要です。
【1
【2】月の初日の週によると、初日のマージン左値を変更し、最初の日を対応する位置に移動します。浮かぶ関係により、残りの日も対応する位置にも移動します。
【3】月の日数に応じて余分な日を隠す。もちろん、他の月に隠される可能性のある日は、隠す前に表示する必要があります。
[4]月の30日が日曜日の場合、新しいラインが占有されます。この時点で、30日目のマージン値を変更することにより、最初の行に移動されます（31日目が新しいラインを占める場合、同様の治療が行われます）
pageページを読み込んだ後、今月と月のカレンダーを表示するために今年と月を取得します。年または月を変更するときは、変更された値を取得し、カレンダーを更新します
//準備：現在のスタイル関数getCSS（obj、style）を取得{if（window.getComputedStyle）{return getComputEdStyle（obj）[style]; } return obj.currentStyle [style];} //実装1：月の日数を取得し、1日目の最初の日、30日と31日関数get_data（年、月）{var result = {}; var d = new date（）; // 2月の場合（月== 2）{//跳躍年の場合（（year％4 === 0 && year％100！== 0）|| year％400 === 0）{result.days = 29; //それが一般的な年の場合} else {result.days = 28; } //それが4、6、9、および11月の場合} else if（month == 4 ||月== 6 ||月== 9 ||月== 11）{result.days = 30; } else {result.days = 31; //月の31日は週の結果です。day31week= d.getDay（d.setSultion（vey、１〜31））; } //月の最初の日は週の結果です。day1week= d.getDay（d.setSultion（veer、１〜1,1））; if（month！= 2）{//月の30日は週の結果です。day30week= d.getday（d.settryear（veer、１〜30））; } return result;} //実装2：月の最初の日の週xによると、最初の日のマージン左側= width *xを設定して、正しい週の位置関数move_day1（var week1 = get_data（year、month）.day1week; day1.style.marginLeft = week1％7*parseint（getCSS（day1、 'width'））+ 'px';} //実装3：月の日数に応じて余分な日数を非表示にします。もちろん、まず、他の月に隠された日数を最初に表示する必要がありますhide_days（年、月）{//他の月に隠される可能性のある日数を復元する（var i = 28; i <31; i ++）{daybox.children [i] .style.display = 'block'; } //月の過剰日数を非表示var days = get_data（year、month）.days; for（var i = days; i <31; i ++）{daybox.children [i] .style.display = 'none'; }}; //実装4：月の30日または31日が日曜日の場合、新しい行が占有されます。マージントップ関数Move_day30（年、月）を設定することにより、新たに占有された日を最初の行に移動します（//月の30日が日曜日の場合（get_data（year、month）.day30week === 0）{day30.margintop = parseint（getCss（day30、 'height'） *（-5） + 'px'; day31.style.margintop = parseint（getCSS（day31、 'height'）） *（-5） + 'px'; day31.style.margintop = parseint（getCSS（day31、 'height'）） *（-5） + 'px'; day31.style.marginLeft = getCSS（day31、 'width'）;戻る; } else {day30.style.margintop = day31.style.margintop = day31.style.marginleft = '0'; } //月の31日が日曜日の場合if（get_data（year、month）.day31week === 0）{day31.style.margintop = parseint（getCSS（day31、 'height'）） *（-5） + 'px'; } else {day31.style.margintop = '0'; }} //実装5：ページをロードするときは、今年と月を取得し、今月のカレンダーを表示します。年または月を変更するとき、年度と月のカレンダーvar = conyear.value = new date（）。getFully（）; var month.value = new date（）。getmonth（） + 1; move_day1（year、month）; hide_days（year、month）; move_day30（year、month）; conyear.value; var month = conmonth.value; if（year <1900 || year> 2100）{year = conyear.value = new date（）。 } if（month <1 ||月> 12）{月= conmonth.value = new date（）。getMonth（） + 1; } move_day1（年、月）; Hide_days（年、月）; move_day30（年、月）;}ソースコードのデモンストレーション
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。