コピペでサクッと導入できるライブラリ非依存の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.
 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.>

<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.
 CDT();
 CDT2();
}
</script>