イベントなどでたまに使うカウントダウン。
いろんな方法があると思います。
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で何故かエラーになりました。