取扱説明書 > ご利用マニュアル > カウントダウンを設置する
編集中のファイルの編集モードを「ソース」にします。
カウントダウンは大中小の3つがあります。見本を見て使いたいデザインが決まったら、下記のコードをソース内の表示させたい場所にコピペしてください。
<!-- ▼ カウントダウンタイマー：大 ここから ▼ -->
<div class="countdown--large"><span id="CDT1"></span></div>
<script language="JavaScript" type="text/javascript">
<!--
function CDT1(){
var tl = new Date('2014/12/21 00:00:00');
var timer = new CountdownTimer('CDT1',tl,'<span class="num">0</span>日<span class="num">0</span>時間<span class="num">0</span>分<span class="num">0</span>秒<span class="num">00</span>');
timer.countDown();
}
$(window).load(function() {
CDT1();
});
// -->
</script>
<!-- ▲ カウントダウンタイマー：大 ここまで ▲ -->
<!-- ▼ カウントダウンタイマー：中 ここから ▼ -->
<div class="countdown--medium">販売開始まであと<span id="CDT2"></span></div>
<script language="JavaScript" type="text/javascript">
<!--
function CDT2(){
var tl = new Date('2014/12/21 00:00:00');
var timer = new CountdownTimer('CDT2',tl,'<span class="num">0</span>日<span class="num">0</span>時間<span class="num">0</span>分<span class="num">0</span>秒<span class="num">00</span>');
timer.countDown();
}
$(window).load(function() {
CDT2();
});
// -->
</script>
<!-- ▲ カウントダウンタイマー：中 ここまで ▲ -->
<!-- ▼ カウントダウンタイマー：小 ここから ▼ -->
<p class="countdown--small">販売開始まであと<span id="CDT3"></span></p>
<script language="JavaScript" type="text/javascript">
<!--
function CDT3(){
var tl = new Date('2014/12/21 00:00:00');
var timer = new CountdownTimer('CDT3',tl,'<span class="num">0</span>日<span class="num">0</span>時間<span class="num">0</span>分<span class="num">0</span>秒<span class="num">00</span>');
timer.countDown();
}
$(window).load(function() {
CDT3();
});
// -->
</script>
<!-- ▲ カウントダウンタイマー：小 ここまで ▲ -->
期限の設定はvar tl = new Date('20xx/xx/xx 00:00:00');で行います。
<div class="countdown--large"><span id="CDT1"></span></div>
<script language="JavaScript" type="text/javascript">
<!--
function CDT1(){
var tl = new Date('2014/12/21 00:00:00');
var timer = new CountdownTimer('CDT1',tl,'<span class="num">0</span>日<span class="num">0</span>時間<span class="num">0</span>分<span class="num">0</span>秒<span class="num">00</span>');
timer.countDown();
}
$(window).load(function() {
CDT1();
});
// -->
</script>
カウントダウン終了後に表示されるテキストはvar timer = new CountdownTimer('CDT1',tl,'<span class="num">0</span>日<span class="num">0</span>時間<span class="num">0</span>分<span class="num">0</span>秒<span class="num">00</span>');で行います。見本では全て0で止まった状態を表現していますが、「キャンペーンは終了しました。」などの文章でもOKです。
<div class="countdown--large"><span id="CDT1"></span></div>
<script language="JavaScript" type="text/javascript">
<!--
function CDT1(){
var tl = new Date('2014/12/21 00:00:00');
var timer = new CountdownTimer('CDT1',tl,'<span class="num">0</span>日<span class="num">0</span>時間<span class="num">0</span>分<span class="num">0</span>秒<span class="num">00</span>');
timer.countDown();
}
$(window).load(function() {
CDT1();
});
// -->
</script>
カウントダウンを表示する部分<span id="CDT1"></span>を挟んでいるタグは（見本として「販売開始まであと」などと書いてありますが）普通のHTMLですので、他のテキストと同じように変更することができます。文字を大きくしたり色を付けたりすることも自由にできます。
<div class="countdown--large"><span id="CDT1"></span></div>
<div class="countdown--medium">販売開始まであと<span id="CDT2"></span></div>
<p class="countdown--small">販売開始まであと<span id="CDT3"></span></p>
複数設置する時はCDT数字()の「数字」を増やしてください。
<div class="countdown--large"><span id="CDT4"></span></div>
<script language="JavaScript" type="text/javascript">
<!--
function CDT4(){
var tl = new Date('2014/12/21 00:00:00');
var timer = new CountdownTimer('CDT4',tl,'<span class="num">0</span>日<span class="num">0</span>時間<span class="num">0</span>分<span class="num">0</span>秒<span class="num">00</span>');
timer.countDown();
}
$(window).load(function() {
CDT4();
});
// -->
</script>
