jQueryでhtmlに設定した日時を判定

cmsが使えない場合にも、「期間を指定し掲載期間が終わったら表示を閉じる動きを実現したい」という感じの事をjsで考えてみた。(考えたっていう程でも無いけど…)
jsファイルの編集はお客さんが分からないのでNGだがhtmlはOKという事で、htmlの「startTime」「endTime」に日時を指定して更新すれば期間設定が出来る様にした。dateに日時の値をそのまま入れてしまっても、演算子で比較が出来るみたい。初心者まる出しで知らなかったけど、これは便利なのでメモしておきます。

例)期間限定おすすめエリアを表示


/* jsの記述 */
$(function(){
 var today = new Date(); //今の日時
 var startTime = new Date($('#startTime').text()); //開始日時
 var endTime = new Date($('#endTime').text()); //終了日時

 //期間内であれば表示
 if(today >= startTime && today <= endTime){
  $('#osusume').show(); //表示
 }else{
  $('#osusume').hide(); //非表示
 }
});

/* htmlの記述 */
<!-- 期間設定 ここから -->
<div id="weekArea">
 <div id="startTime">2011/3/14 12:00:00</div>
 <div id="endTime">2011/3/16 18:00:00</div>
</div>
<!-- 期間設定 ここまで -->

<!-- 期間限定おすすめエリア ここから -->
<div id="osusume">期間限定おすすめ情報</div>
<!-- 期間限定おすすめエリア ここまで -->


/* cssの記述 */
//期間設定はとりあえず消しとく
#weekArea {
 display: none;
}

関連記事

この記事のハッシュタグに関連する記事が見つかりませんでした。

最新記事

カテゴリー

アーカイブ

ハッシュタグ