ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript ブログスタイルカレンダー control_time and date の新しいアルゴリズム
JavaScript ブログスタイルカレンダー control_time and date の新しいアルゴリズム
- WBOYオリジナル
- 2016-05-16 19:01:151156ブラウズ
使用説明:
プログラムは比較的単純で、コード内に使用方法が記載されています。
最初のステップは、カレンダーをインスタンス化し、パラメーターを設定することです。
パラメータの説明:
年: 表示する年
月: 表示する月
SelectDay: 日付を選択します
onSelectDay: 選択した日付でトリガーします
onToday: トリガー今日の日付
onFinish: カレンダーが描画された後にトリガーされます
通常、SelectDay は選択された日付に設定され、この日付のスタイルを設定する関数が onSelectDay に設定されます
たとえば。例では、SelectDay は月の 10 日に設定され、その日のスタイルを onSelect に設定します。
コード コードは次のとおりです。
SelectDay : new Date().setDate(10),
onSelectDay: function(o){ o.className = "onSelect" } 、
、onToday は今日の日付のスタイルを設定するために使用されます。onSelectDay: function(o){ o.className = "onSelect" } 、
たとえば、この例では、今日の日付のスタイルを onToday に設定します。
onToday: function (o){ o.className = "onToday" },
onFinish カレンダー プログラムに必要な設定を入れることができます。
this.yearとthis.Monthにより、現在のカレンダーで表示されている年と月を取得できます。
データのある日付もここで設定されます。たとえば、この例では、今月のデータのある日付のリストがあり、対応する日付がこのリストに従って設定されます:
。
コードをコピーします コードは次のとおりです。
var flag = [10,15,20]; (var i = 0, len = flag.length; i
this.Days[flag[i]].innerHTML = "" flag[i] "";
}
この日付リストは例では固定されていますが、実際のアプリケーションでは年と月に応じて対応する日付リストを取得できます。
個人的には年と月を使用して取得することをお勧めします。アヤックス経由で。
this.Days[flag[i]].innerHTML = "" flag[i] "";
}
この日付リストは例では固定されていますが、実際のアプリケーションでは年と月に応じて対応する日付リストを取得できます。
個人的には年と月を使用して取得することをお勧めします。アヤックス経由で。
プログラムには、PreMonth (前月を表示) と NextMonth (翌月を表示) という 2 つの便利なメソッドもあります。
テストコード:
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。