ホームページ作成/文字や画像の動的変更 (HTML,CSS,JavaScript)

新年や記念日まで毎日カウントダウン

指定の日まで、あと何日あるのかをカウントダウン表示する方法をご紹介。新年までカウントダウンして、年が明けたらお祝いメッセージを表示するなど、様々に活用できます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

指定日まで毎日自動でカウントダウン

今回は、指定の日まで、あと何日あるかをカウントダウン表示する方法をご紹介致します。元日や誕生日、その他の記念日などを設定して、自動カウントダウンさせてみましょう。
簡単なJavaScriptで実現ですので、ぜひご活用下さい。

動作サンプル:

JavaScriptを使って計算

実現には、JavaScriptを利用するのが最も手軽でしょう。
「2008年まであとXX日」と表示するだけなら、下記のわずかなソースだけで実現できます。

<script language="JavaScript"><!--
var now = new Date();
var point = new Date(2008,1-1,1);
var countdown = Math.ceil( ( point.getTime() - now.getTime() ) / (1000*60*60*24) );

if(countdown > 0) {
   document.write('2008年まであと、', countdown ,'日!');
}
else {
   document.write('あけましておめでとう!');
}
// --></script>

HTMLファイルに、そのままコピー&ペーストするだけで使用できます。
2008年1月1日までは「あとxx日」と表示され、2008年1月1日以降は「あけましておめでとう」と表示されます。

赤色太字部分
日付を「2003年1月1日」以外にしたい場合は、ここを書き換えるだけです。年・月・日の順にカンマで区切って指定します。 月の指定だけは「1月が0」「2月が1」…「12月が11」となるので、分かりやすいように、「指定月-1」という記述にしてあります。

青色太字部分
実際にページ上に表示される文字です。ここも好きなように書き換えられます。 ただし、シングルクオーテーション(「'」)を表示したい場合は「¥'」と記述する必要があります。

表示例:

カウントアップもできるようにするには

上記のソースでは、「期日前のカウントダウン」表示と「期日到来メッセージ」表示の2種類しか用意できません。
そこで、期日が過ぎたら1日ずつカウントアップして、「XX日前に過ぎました」のような表示をできるようにしてみましょう。

期日が過ぎたらカウントアップする方法へ >>

  • 1
  • 2
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます