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

新年や記念日まで毎日カウントダウン(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

期日が過ぎたらカウントアップ

カウントダウンだけでなく、指定日が過ぎたらカウントアップもさせたい場合は、次のようなソースになります。

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

if(countdown > 0) {
   document.write('2002年の文化の日まであと、', countdown ,'日!');
}
else if(countdown == 0) {
   document.write('今日は文化の日です。');
}
else {
   document.write('2002年の文化の日は', countup ,'日前に過ぎました。');
}
// --></script>

指定日までの日数が格納されている変数「countdown」の値をif文でチェックして、

  • 0より大きい場合: あと何日なのかを表示
  • 0の場合: 当日用メッセージを表示
  • 0より小さい場合: 何日前に過ぎたのかを表示

……のように表示させています。
ソース中の太字の箇所を自由に書き換えてご使用下さい。

表示例:

おわりに

今回は、指定した日までの日数を表示する方法をご紹介致しました。
ソース中で書き換える必要のある部分は非常にわずかですので、手軽にご活用頂けると思います。
ぜひ、試してみて下さい。

【関連記事】

【編集部おすすめの購入サイト】
Amazonでホームページ作成の参考書をチェック!楽天市場でホームページ作成関連の書籍をチェック!
  • 前のページへ
  • 1
  • 2
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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