仲がいいのか悪いのか…

_DSC0712

コロンがいつも、ジローにちょっかい出す。
お互いどういう風に思ってるんだか…

ちなみにコロンが首に巻いているのは、ヘアバンド。

Javascriptでカウントダウン

イベントなどでたまに使うカウントダウン。
いろんな方法があると思います。

HTMLです。

<div id="countdownText">
	<span id="countdownLead">イベントまであと</span>
	<dl>
		<dt id="cDays">00</dt>
		<dd>DAYS</dd>
	</dl>:<dl>
		<dt id="cHours">00</dt>
		<dd>HOURS</dd>
	</dl>:<dl>
		<dt id="cMinutes">00</dt>
		<dd>MINUTES</dd>
	</dl>:<dl>
		<dt id="cSeconds">00</dt>
		<dd>SECONDS</dd>
	</dl>
</div>

CSSです。

#countdownText {
	font-size: 3.2rem;
	line-height: 4.2rem;
}

#countdownLead {
	font-size: 2.0rem;
	color: #555;
}

#countdownText dl {
	display: inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align: top;
	white-space: nowrap;
	width: 7.0rem;
}

#countdownText dt {
	display: block;
	font-weight: bold;
}

#countdownText dd {
	display: block;
	font-size: 1.3rem;
	line-height: 1.25;
}

javascriptです。カウントダウン自体をjQueryで表示にします。

var timer,
	endDateTime = new Date('Sep 10,2014 00:00:00'),
	a_day = 24 * 60 * 60 * 1000;
function countdown() {
	var now = new Date();
	var leftTime = endDateTime - now;
	if (leftTime <= 0) {
		//console.log('Now is the time.');
		clearTimeout(timer);
		$('#countdownText').hide();
		return false;
	}
	$('#countdownText').show();
	
	var d = Math.floor(leftTime / a_day);
	var h = Math.floor((leftTime % a_day) / (60 * 60 * 1000));
	var m = Math.floor((leftTime % a_day) / (60 * 1000)) % 60;
	var s = Math.floor((leftTime % a_day) / 1000) % 60 % 60;
	
	d = (d < 10) ? '0' + d : d;
	h = (h < 10) ? '0' + h : h;
	m = (m < 10) ? '0' + m : m;
	s = (s < 10) ? '0' + s : s;
	
	$("#cDays").text(d);
	$("#cHours").text(h);
	$("#cMinutes").text(m);
	$("#cSeconds").text(s);
	
	timer = setTimeout(function(){
		countdown();
	}, 1000);
}

数年後のカウントダウンで、「◯年」表記を追加するのには、うるう年なども計算しないといけなさそうなので、今回は見送りです。
setTimeoutの第一引数は、function(){}のカタチで書かないとChromeで何故かエラーになりました。