memo.xight.org

Home > Changelogメモ > 2006-05 > 2006-05-18 > 指定した日時までの時間を表示するスクリプト "countdown.js" と使用法

2008 : 01 02 03 04 05 06 07 08 09 10 11 12
2007 : 01 02 03 04 05 06 07 08 09 10 11 12
2006 : 01 02 03 04 05 06 07 08 09 10 11 12
2005 : 01 02 03 04 05 06 07 08 09 10 11 12
2004 : 01 02 03 04 05 06 07 08 09 10 11 12
2003 : 01 02 03 04 05 06 07 08 09 10 11 12
2002 : 01 02 03 04 05 06 07 08 09 10 11 12

2006-05-18

指定した日時までの時間を表示するスクリプト "countdown.js" と使用法

- Summary
YAPC::Asia 2006のカウントダウンで使われていたスクリプトを見てみた．

- countdown.js

function toCountString(sec) {
	if (sec <= 0) {
		return '00:00:00';
	}
	var day = Math.floor(sec / (60*60*24));
	var hour = Math.floor(sec % (60*60*24)/(60*60)).toString().replace(/^(\d)$/, '0$1');
	var min = Math.floor(sec % (60*60*24) / (60) % 60).toString().replace(/^(\d)$/, '0$1');
	var sec = Math.floor(sec % (60*60*24)%60%60).toString().replace(/^(\d)$/, '0$1');
	return day + 'days ' + hour + ':' + min + ':' + sec;
}
 
function updateCountdown(id, m, c) { 
	var node = document.getElementById(id);
	if (!node) {
		return false;
	}
	for (var i = 0; i < node.childNodes.length; i++) {
		node.removeChild(node.childNodes[i]);
	}
	var count = toCountString(Math.floor((m - c)/1000));
	node.appendChild(document.createTextNode(count));
}

- HTML

<script type="text/javascript" src="countdown.js">
<div id="countdown"></div>
<script type="text/javascript">
	updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date());
	setInterval("updateCountdown('countdown', new Date('March 29,2006 00:00:00'), new Date())", 1000);
</script>

- 複数のカウントダウンに対応する
原始的にやってみると以下のようになる．

<div id="countdown-1"></div>
<div id="countdown-2"></div>
<div id="countdown-3"></div>
<script type="text/javascript">
	updateAllCountdown();
	setInterval("updateAllCountdown()",1000);
	
	function updateAllCountdown(){
		updateCountdown('countdown-1', new Date('June 22,2006 00:00:00'), new Date());
		updateCountdown('countdown-2', new Date('October 1,2006 00:00:00'), new Date());
		updateCountdown('countdown-3', new Date('March 18,2007 00:00:00'), new Date());
		return true;
	}
</script>