コピペでサクッと導入できるライブラリ非依存のJavascriptカウントダウン

期間限定商品のセールスページなどで購買率を上げるカウントダウンのJSスクリプトです。特徴はJQueryなどのライブラリを必要とせず使いたい場所にサクッとコピペで動くのと、cssで細かく装飾できるように適所にclassが定義してあります。

使い方

下のJavascriptとdiv要素を使いたい場所のコピペします。div内にカウントダウンが表示されます。下にあるfunction CDT(){}の中で期限日時やdivのID名、カウント終了後のメッセージを指定します。

この例では、2036年1月1日までカウントダウンします。

<div id="CDT"></div>

<script language="JavaScript" type="text/javascript">
function CountdownTimer(elm,tl,mes){
 this.initialize.apply(this,arguments);
}
CountdownTimer.prototype={
 initialize:function(elm,tl,mes) {
  this.elem = document.getElementById(elm);
  this.tl = tl;
  this.mes = mes;
 },countDown:function(){
  var timer='';
  var today=new Date();
  var day=Math.floor((this.tl-today)/(24*60*60*1000));
  var hour=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*60*1000));
  var min=Math.floor(((this.tl-today)%(24*60*60*1000))/(60*1000))%60;
  var sec=Math.floor(((this.tl-today)%(24*60*60*1000))/1000)%60%60;
  var milli=Math.floor(((this.tl-today)%(24*60*60*1000))/10)%100;
  var me=this;

  if( ( this.tl - today ) > 0 ){
   if (day) timer += '<span class="day">'+day+'日</span>';
   if (hour) timer += '<span class="hour">'+hour+'時間</span>';
   timer += '<span class="min">'+this.addZero(min)+'分</span><span class="sec">'+this.addZero(sec)+'秒</span><span class="milli">'+this.addZero(milli)+'</span>';
   this.elem.innerHTML = timer;
   tid = setTimeout( function(){me.countDown();},10 );
  }else{
   this.elem.innerHTML = this.mes;
   return;
  }
 },addZero:function(num){ return ('0'+num).slice(-2); }
}
function CDT(){
 var tl = new Date('2036/1/1 00:00:00');
 var timer = new CountdownTimer('CDT',tl,'終了しました');
 timer.countDown();
}
window.onload=function(){
 CDT();
}
</script>

cssで装飾する

残り日数はspan.day、残り時間はspan.hourなどで出力されます。.min、.sec、.milliがついています。例えばこのように指定します。

<style type="text/css">
#CDT{
 font-size: 26px;
}
#CDT .day{
 font-size: 48px;
}
#CDT .hour,#CDT .min,#CDT .sec{
 font-size: 32px;
}
</style>

1ページに複数のカウントダウンを表示する

div要素を追加し、function CDT()をコピーして関数名と対応するdiv要素名を変更します。window.onload=function(){}内での呼び出しも忘れずに。下の例では、このページ先頭のサンプルを追加しました。次の週末(土曜日)を調べ、その日までカウントしています。

<div id="CDT"></div>
<div id="CDT2"></div>
function CDT(){
 var tl = new Date('2036/1/1 00:00:00');
 var timer = new CountdownTimer('CDT',tl,'終了しました');
 timer.countDown();
}

function CDT2(){
 var today = new Date();
 var tl = new Date(today.getFullYear(),today.getMonth(),today.getDate());
 for( i = 1 ; i <= 7 ; i++ ){
  tl.setTime( tl.getTime() + 86400000 );
  if ( tl.getDay() == 6 ){
   break;
  }
 }
 var timer = new CountdownTimer('CDT_sat',tl,'週末だよ');
 timer.countDown();
}
window.onload=function(){
 CDT();
 CDT2();
}
</script>