2014/07/15

【JavaScript】コピペで超簡単!カウントダウンパーツの作り方

【JavaScript】コピペで超簡単!カウントダウンパーツの作り方

キャンペーンサイトなどでよく見かける,期日までカウントダウンしているパーツの作成方法を紹介します.

ティザーサイトやカウントダウンに使える!JavaScriptで2つの日時から期間を算出する方法の応用編となりますが,コピペで簡単に出来ます.

目次

ソースコード

まず,HTML上に,出力する場所を作成します.

<div id="countOutput"></div>

次にJavaScriptによるコードを御覧ください

function dateCounter() {

    var timer = setInterval(function() {
	//現在の日時取得
	var nowDate = new Date();
	//カウントダウンしたい日を設定
	var anyDate = new Date("2014/12/31 23:59:59");
	//日数を計算
	var daysBetween = Math.ceil((anyDate - nowDate)/(1000*60*60*24));
	var ms = (anyDate - nowDate);
	if (ms >= 0) {
	    //時間を取得
	    var h = Math.floor(ms / 3600000);
	    var _h = h % 24;
	    //分を取得
	    var m = Math.floor((ms - h * 3600000) / 60000);
	    //秒を取得
	    var s = Math.round((ms - h * 3600000 - m * 60000) / 1000);

	    //HTML上に出力
	    document.getElementById("countOutput").innerHTML = daysBetween + "日と" +_h + "時間" + m + "分" +s + "秒";

	    if ((h == 0) && (m == 0) && (s == 0)) {
		clearInterval(timer);
		document.getElementById("countOutput").innerHTML = "経過しました";
	    }
	}else{
	    document.getElementById("countOutput").innerHTML = "経過しました";
	}
    }, 1000);
}
dateCounter();

カウントダウンしたい日時を設定した後,setInterval()メソッドを使用し,1秒に一度,その日と現在の時刻から期間を算出しています.

また,期間がゼロになった場合やマイナスの場合は処理を終了するようになっています.

サンプル

以下が実際の動作サンプルになります.日時は2014/12/31に設定してあります.

まとめ

以上の方法が基本となります.HTML上に出力された文字のスタイルを変更したり,出力を画像に変更すれば,7セグメントの数字での表示に出来たりなど,様々な演出をすることが出来ます.