javascriptで「今から○時間限定タイムセール」のカウントダウンタイマーを作る

特定のページにアクセスしたときに、アクセスからn時間以内に次のアクションを起こしてもらうためのカウントダウンタイマーをjavascriptで作ってみました。

試しに72時間限定キャンペーンと言う感じで、残り72時間からスタートするカウントダウンタイマーを作りました。

HTML

<div id="js-timer"></div>

HTMLはこれだけ。innerHTMLで中身を入れていきます。

javascriipt

72時間を秒に換算しておく。本当はここも計算でやるといいのかもしれませんが。
settimeの値を変えることで残り時間を変更することができます。

var settime = 259200; //72時間
var timer = document.getElementById('js-timer');
var h = 0;
var m = 0;
var s = 0;

//カウント開始
setInterval('countdown()',1000);

var countdown = function(){  
    settime--;
    h = Math.floor(settime / 3600);
    m = Math.floor(settime / 60) % 60;
    s = (settime % 60) % 60;
    timer.innerHTML = '残り' + h + '時間' + m + '分' + s + '秒';
 };

• settimeの数値を1減らし、
• settimeの数値をそれぞれh（時間）、m（分）、s（秒）に変換し
• timerに代入する
• 上記の処理を1秒おきに繰り返す

という単純な作りです。

実装結果

See the Pen カウントダウンタイマー by nagomi-753 (@nagomi-753) on CodePen.

cookieの制御などと合わせると良い感じになるのではないでしょうか〜
ただこういうカウントダウンタイマーって、キャンペーンとかセールとかでユーザーのCVを上げるための装飾であることが多いので、あんまり厳密に作らないことのほうが多い。

今回はフォームへの申込み完了後のサンクスページにて、更に申し込みを増やすための施策として実装しました。
クイズとかに利用するのもありですね。