ウェブ、ショウジン

JavaScriptを使った「画像」による日付のカウントダウン

2011-8-22
Category
プログラミング

最近自分が関係する某告知サイトで当日までのカウントダウンが必要になったので、それをJavaScriptで実装。(システムフォントではなく、画像で用意した数字で)

とくに難しいことはなかったけど、自分はJavaScriptよく知らなくてすぐ忘れそうなので、一応残しておきます。(日だけです。時間、秒が必要になったらまたそんときにやります。)

2011年11月4日までのカウントダウン

2011年11月4日まで、あと
<script type="text/javascript">
//<![CDATA[
dir = "img/countdown/"; // 画像のあるディレクトリを指定(スラッシュ忘れないこと)
date1 = new Date();
date2 = new Date(2011, 10, 4); // 月部分は0から始まってこれが1に対応しているので実際の月よりマイナス1を指定

d = (date2.getTime() - date1.getTime()) / (24 * 60 * 60 * 1000);
d = Math.abs(Math.ceil(d));
s = d.toString();

for (i = 0; i < s.length; i++) {
	document.write("<img src=\"" + dir + s.charAt(i) + ".png\" width='58' height='85' alt=''>");
}
//]]>
</script>
日です。

最初、普通に日時をそのまんま設定したらカウントダウンの数字が合わなくてちょっと焦りましたが、JavaScriptのDateオブジェクトが持っている月は0から11が1月から12月に対応しているということがわかったので、実際の月よりマイナス1にした数値に変更してオーケー。

それでもちょっと不安になったのでWeb上にあった「あと何日?」で確認。

デモページ

とくに難しいことなかったとかいけしゃあしゃあと言ってますが、以下のサンプルを参考にさせていただきました。大変助かりました。ありがとうございます。

JavaScript便利帳

Categories

Tag Cloud

AdMob Android Apache centos CodeIgniter EC-CUBE facebookアプリ facebookページ feed Firefox Flash google googleanalytics htaccess iPad iPhone JavaScript lamp mobile nginx ogp pear php plugin rollover rss sendmail setting smarty ssh Titanium Mobile Titanium Studio tutorial ubuntu vim VirtualBox vmware vps Windows WordPress xampp youtube さくらインターネット アクセス解析 カスタム投稿