今週セールページを用意するときにタイムセールの枠を作ることになったのですが、カウントダウンタイマーを自動で表示して終わったら非表示にできないかとscriptを探していたらこんなものを見つけました。
http://qiita.com/dribble13/items/3eb39726aba33add6c0aqiita.com
これがすごく便利！
このscriptでできること
- 指定した日時になったら要素を表示する
- 指定した日時になったら要素を非表示にする
- 指定した期間だけ要素を表示する
このscriptの利点
- jQueryなので記述が簡単に済む
- 日時指定が要素のタグ内に記述できるので管理が簡単
導入方法
1.jQueryライブラリを読み込む
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.2/jquery.min.js"></script>
を
<head>~</head>内に記述。
2.下記scriptを記述もしくは読み込む
直接html内に記述する場合は
<script>
$(document).ready(function() {
$(".view_timer").each(function(index, target) {
var startDate = $(this).attr("data-start-date");
var endDate = $(this).attr("data-end-date");
var nowDate = new Date();
if (startDate) {
startDate = new Date(startDate);
} else {
startDate = nowDate;
}
if (endDate) {
endDate = new Date(endDate);
}
if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
$(this).show();
} else {
$(this).hide();
}
});
});
</script>
をに記述
jsファイルとして読み込むには
$(document).ready(function() {
$(".view_timer").each(function(index, target) {
var startDate = $(this).attr("data-start-date");
var endDate = $(this).attr("data-end-date");
var nowDate = new Date();
if (startDate) {
startDate = new Date(startDate);
} else {
startDate = nowDate;
}
if (endDate) {
endDate = new Date(endDate);
}
if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
$(this).show();
} else {
$(this).hide();
}
});
});
を
view_timer.jsなどの名前で保存。
html内に<script src="js/view_timer.js"></script>として読み込む。
3.表示/非表示を切り替えたい要素をspanで囲んで日時指定
指定方法は3パターン
記入例
指定した時間まで表示する（2/15 0:00 から非表示にする）
<span class="view_timer" data-end-date="2016/2/15 0:00"></span>
指定した時間までは非表示（2/15 0:00 から表示する）
<span class="view_timer" data-start-date="2016/2/15 0:00"></span>
指定した期間だけ表示する（2/15 0:00 ～ 2/16 0:00 の間だけ表示する）
<span class="view_timer" data-start-date="2016/2/15 0:00" data-end-date="2016/2/16 0:00"></span>
以上で設定は完了。
これで時限式に要素の表示と非表示を切り替えることができます。
しかもタグに個別で直接設定できるため複数のタイマーの管理が分かりやすい。
あとがき
今後のセールページ製作には欠かせないscriptになりそうです。
タイムセールに使ったり、休みの日の自動更新につかったり、まぁscriptである以上はRMSのページなんかでは使えないんですけどね。
