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>