ホーム >
jQuery/JavaScript >
超簡単！Javascriptで指定時間までカウントダウン

超簡単！Javascriptで指定時間までカウントダウン

ありふれたといえばありふれてますが、たまに使うので備忘録程度に。
ただのよくあるカウントダウンです。すっごいシンプル。読むのめんどくさい人は、簡単なのでデモ見るなり、ダウンロードしちゃうなりご自由にどぞ～
デモはこちら
 ダウンロードはこちら

HTML側

headとかでcountdown.jsを読み込んで、「countdownbox」というIDを作ってください。
「countdownbox」というIDところにカウントダウンが表示されるようになります。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="countdown.js"></script>
</head>

<body>
<div id="countdownbox"></div>
</body>
</html>

Javascript側

4～7行の「year」「mon」「day」「time」がカウントダウン終了の日時になります。
開始と終了の文言を変更する場合は25行目と28行目を変更してくださいね。

window.onload=show;

function show() {
	var year = 2014; //年
	var mon = 10; //月
	var day = 24; //日
	var time = 12; //時
	var end = new Date(year,mon-1,day,time,00,00);
	var now = new Date();
	var base = end.getTime()-now.getTime();
	var cday = Math.floor(base/(1000*60*60*24));
	var base = base -(cday*(1000*60*60*24));
	var chour = Math.floor(base/(1000*60*60));
	var base = base -(chour*(1000*60*60));
	var cmin = Math.floor(base/(1000*60));
	var base = base -(cmin*(1000*60));
	var csec = Math.floor(base/1000);
	var base = base -(csec*(1000));
	var cmc = Math.floor(base/10);
	if(cmin<10){cmin = '0' + cmin;}
	if(csec<10){csec = '0' + csec;}
	if(cmc<10){cmc = '0' + cmc;}

	if((end - now) > 0){
		document.getElementById("countdownbox").innerHTML='カウントダウン終了まで' + cday + '日と' + chour + '時間' + cmin + '分' + csec + '秒' + cmc + 'です。';
	}
	else {
		document.getElementById("countdownbox").innerHTML='カウントダウン終了しました';
	}
	timerID = setTimeout('show();', 10);
}

デモはこちら
 ダウンロードはこちら

この応用でcookieを使った、ページを開いた瞬間から一定時間までカウントダウンするのもそのうち書こうかなぁ・・・