カレンダーの表示、選択などは、Webページ上の多くの場所で使用されます。この記事では、HTML、CSS、およびJavaScriptを使用して、簡単なカレンダーを実装しています。完了後、効果はページの左側の効果に似ています。前月または来月に切り替えることができます。また、実際の条件に応じて拡張することもできます。
HTML
HTMLパーツは比較的単純で、Divを宣言し、特定のHTMLがJavaScriptを使用して生成されます。全体的なコンテンツはほぼこのようなものです。
<！doctype html> <html> <head> <meta charset = 'utf-8'> <link rel = 'styleSheet' href = 'href =' href = 'file path'/> <title> </head> <body> <div class = 'calendary' = 'calendar'> </div> <script = 'exters' file path '> </script> </body> </html>
CSS
/*全体の設定*/*{マージン：0px;パディング：0px;}/***カレンダーのサイズを設定*/。カレンダー{width：240px;高さ：400px;ディスプレイ：ブロック;}/***カレンダーの上部ボックスを設定します*/。カレンダー.Calendar-Title-Box {position：relative;幅：100％;高さ：36px;ラインハイト：36px;テキストアライグ：センター; Border-Bottom：1PX SOLID #DDD;}/***先月のボタンアイコンを設定*/。カレンダー.Prev-Month {position：absolute;トップ：12px;左：0px;ディスプレイ：インラインブロック。幅：0px;高さ：0px;国境左：0px;ボーダートップ：6px固体透明。国境右：8pxソリッド＃999;国境圏：6px固体透明。カーソル：ポインター;}/***来月のボタンアイコンを設定*/。トップ：12px;右：0px;ディスプレイ：インラインブロック。幅：0px;高さ：0px;国境右：0px;ボーダートップ：6px固体透明。国境左：8pxソリッド＃999;国境圏：6px固体透明。カーソル：ポインター;}/*カレンダーテーブルスタイルの設定*/。カレンダーテーブル{width：100％;国境崩壊：崩壊;テキストアライグ：センター;}/*テーブルラインの高さ*/。カレンダーテーブルtr {height：30px; line-height：30px;}/*現在の日の特別なディスプレイ*/。現在の日{色：赤;}/*今月のテキストカラー*/。現在基本的に、スタイルの設定、いくつかの簡単な設定については何も言うことはありません。たとえば、特別なものは「先月」と「来月」を表すアイコンです。絶対的なポジショニングを採用し、CSSの境界属性を使用してスタイルを設定します。
JavaScriptの日付オブジェクト
正式なJSコードを開始する前に、JSの日付オブジェクトを理解する必要があります。日付オブジェクトを介して、年、月、日、時間、タイムスタンプなどの情報を取得できます。特定の参照：http：//www.w3school.com.cn/jsref/jsref_obj_date.asp
var d1 = new date（）; //現在のシステム時間を取得する現在の時刻は2016年4月25日月曜日です。 //年次情報、2016 D1.getMonth（）を取得します。 //毎月の情報を取得します（0：0-11から始まる）3 d1.getDate（）; //ここで日情報を取得します結果：25 d1.getDay（）; //毎週の情報（0-6）を取得します。結果：1
初期化中に年、月、日付情報を直接設定することもできます
＃2016年3月15日var d2 = new Date（2016、2、15）; //月は0からカウントされるため、1つのd2.getfulterear（）を差し引く必要があります。 // 2016 d2.getmonth（）; // 2 d2.getDate（）; // 15 d2.tolocaledatestring（）; // "2016/3/15"は、設定が正しいことを証明しています
カレンダーには、1か月あたり数日などの問題が含まれます。 JSでは非常に簡単です。年、月、日が設定されている場合、現在の月を超えた場合、JSは来月を自動的に計算します。たとえば、4月には30日しかありません。 31に設定されている場合、取得した日付タイプは5月1日を自動的に計算します。 0に設定されている場合、JSは4月30日に処理し、5月1日は4月29日です。
var d3 = new Date（2016、3、30）; d3.tolocaledatestring（）; // "2016/4/30" var d4 = new Date（2016、3、31）; d4.tolocaledatestring（）; // "2016/5/1" var d5 = new Date（2016、3、33）; d5.tolocaledatestring（）; // "2016/5/3" var d6 = new Date（2016、4、1）; d6.tolocaledatestring（）; // "2016/5/1" var d7 = new Date（2016、4、0）; d7.tolocaledatestring（）; // "2016/4/30" var d8 = new Date（2016、4、-3）; d8.tolocaledatestring（）; //「2016/4/27」
JavaScript
JSの日付オブジェクトの基本的な使用法を理解した後、次のステップはコード実装パーツです。全体的なアイデアは次のとおりです。グローバルDateOBJ変数を定義して、テーブルに表示する必要がある年および月情報を記録します。タイトルのコンテンツは、DateOBJに基づいて撮影されます。テーブルの日付は、DateOBJの年と月に対応するNo. 1のすべての情報を取得し、前月の最後の数日間のデータを逆転させるために、テーブルの最初の行の1番の位置を決定し、今月と来月のデータが後退されます。
具体的な手順：
1. dateobj変数を宣言し、現在のシステム時間に初期値を割り当てます
2。カレンダーdivのHTML要素をレンダリングします
3. DateOBJから月の1日の情報を取得し、それを使用してテーブル内のすべての日付を通過します。
4。前月と来月のイベントをバインドしますアイコン
（function（）{ /**日付を記録するために使用されます。表示されると、Dateobjの日付と月の年と月に応じて表示されます* / var dateobj =（function（）{var _date = new date（）; //デフォルトは現在のシステムタイムリターンです{getDate：function（）{return _date;}、setdate：fenction（）{_date; // html div renderhtml（）来月のvarbodybox.createelment（ "div"）; id = 'nextmonth' class = 'next-month'> </span> "; calendar.appendchild（titlebox）; //カレンダーdivに追加//テーブルエリアのhtml構造を設定しますbodybox.classbox.class-body-box '; var _headhtml =" <tr> " +" + " 「<th> " +" <th> " +" <th> " +" <th> " +" </tr> "" "<tr>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + "<td> </td>" + " +" <td> </td> " 「</tr>」 dateobj.getDate（） 「year」 + _datestr.substr + "month" innertext; //（var i = 0; i <_tds.length; i ++）{var _ year、_month -1、i+1 -_firstday（ //_tds getDatestr（_firstday）.substr（0、6））{_tds [i] .classname = 'currentmonth'; document.getElementbyid（bermtherth = document.getElementbyid（addevent）; 2.0 dom.addeventlistener（e）{func（e）;}） } / ** * Toprevmonth（）{dateobj.getDate（）をクリックしてください。日付= dateobj.setdate（new.getMonth（） + 1、1）; date.getMonth +/ }}）（）;この例では、テーブルの日付をクリックするときのイベントは追加されません。 Bindevent関数に次のコードを追加して、クリックされた日付に関する情報を取得できます。
var table = document.getElementById（ "candalentable"）; var tds = table.getElementsbytagname（ 'td'）;
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。