前の言葉
簡単なカレンダーは、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、1〜31)); } //月の最初の日は週の結果です。day1week= d.getDay(d.setSultion(veer、1〜1,1)); if(month!= 2){//月の30日は週の結果です。day30week= d.getday(d.settryear(veer、1〜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をもっとサポートすることを願っています。