javascriptでカウントダウンタイマーを作る

皆さまごきげんよう。
いきなりですが、ちょっとメニューバーの右上の辺りを見てください。
いつの間にか2020東京五輪まであと◯日というものが出現しております!
本日はjavascriptでカウントダウンタイマーを作ってみます。

javascriptで時間を取得する

簡単に言うと、オリンピックの日付から今日の日付を引いた日数を計算し、htmlに表示させるプログラムを書きます。

カウントダウンタイマーを作るための基本は、時間の取得です。
これを作って時間の取得の使い方を覚えてしまおうと思います!

下記が、このオリンピックまでのカウントダウンタイマーのソースです。

やっていることをざっくり言うと、
●最初にcountdowntimerという関数を作る
●この中にsetTimeout時間の取得〜ループ処理、指定の時間になったらclearTimeoutでタイマーを止める処理を書く
●最後にcountdowntimer関数を呼び出す


   function countdowntimer(){
     var countdown = setTimeout(function(){
      var today = new Date();//今の日時
      var targetDay = new Date('2020/7/24 20:00:00');//開催日の日時
      var daysBetween = Math.ceil((targetDay - today) / (24*60*60*1000));//経過日時を1日のミリ秒で割る
      var remainDay = (targetDay - today);//残り日時

      if (remainDay >= 0){//もし残りの日時が0より多かったら、
      var h = Math.floor(remainDay / 3600000);//残りの日時を1hで割った時間を取得(1h=3600000ms)
      var h1 = h % 24;//hを24で割った余り。ここでは使っていないが、残り○時間を取得したい時に。
      var m = Math.floor((remainDay - h * 3600000) / 60000);//分を取得(1分=60000 ms)
      var s = Math.round((remainDay - h * 3600000 - m * 60000) / 1000);//秒を取得(1秒=1000ms)
      $("#countdown").html("2020東京五輪まであと" + daysBetween + "日です!");//文中にhtmlタグを使いたい場合はhtmlメソッド使う
      if ((h == 0) && (m == 0) && (s == 0)) {//指定の日時が来たら、
       clearTimeout(countdown);//カウントダウンを止める
       $("#countdown").text("2020東京五輪開催です!");//htmlに出力
       }
      }else{//指定の日時が過ぎてもテキストを表字させる用
        $("#countdown").text("祝2020東京五輪開催!");
       }
     }, 1000);//処理を1秒後に予約
   }
   countdowntimer();//関数を呼び出す

一行ごとの説明はコメントアウトした通りですが、ポイントは

  1. new Date()で今日の日付一式のデータを取得する
  2. new Date(‘2020/7/24 20:00:00’);の様に(‘ ‘)の中に指定の日付を入れて、指定日の時間を取得する
  3. 日付は整数なのでMath.ceilメソッドで小数点以下の端数を切り上げ
  4. 指定日から本日の時間の差分を求める
  5. if文で、残り時間が0より多かったら、0になったら、指定時間経過後、の3パターン分htmlに表示させる指定をする
  6. 残り時間が0になった時点でcleartimeoutでタイマー処理を解除
  7. この一連の流れを1秒ごとに更新する
  8. 時間の単位はミリ秒 1秒=1000ms
  9. setInterval()ではなくsetTimeout()を使う

setIntervalとsetTimeoutの違い

setIntervalsetTimeoutの違いについは、調べれば詳しい解説がたくさんありますが、簡単に言いますと

  • setInterval → 処理が終わっていなくても指定の時間ごとに処理を実行する。止める時はclearInterval
  • setTimeout → 一定時間経過後に処理を一回だけ実行する。処理を解除する時はclearTimeout

時計の様にリアルタイムで表示が変わっていくタイプのタイマーなら、setIntervalですが、処理が終わっていなくても次々に処理を進めるタイプのsetIntervalを使うとクラッシュの危険もあり、やはりsetTimeoutを使った方が安全だと言えましょう。

jQueryでhtmlファイルに出力する

jQueryでブラウザに表示するための記述についての説明です。

ここでは出力先のhtmlの要素にcountdownというidをつけています。
id countdownに、五輪まであと何日かをhtmlに出力せよという命令文を書きます。
この部分です。↓


$("#countdown").html("2020東京五輪まであと" + daysBetween + "日です!");

今回はhtmlメソッドtextメソッドの両方を使ってみましたが、どちらを使っても出力されます。
もし表示させたい文の中で改行タグ<br>などhtmlタグを使いたい場合は、textメソッドではなくhtmlメソッドを使うのが良いです。

日時を変えて簡単なhtmlファイルを作ってみましたよ。
countdown テスト

無事表示出来ました。
ソースの中の日時や、setInterval()とsetTimeout()を入れ替えて違いを確認してみて下さい。
setInterval()にすると、リアルタイムで時計の針が進みますよ。


<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>指定の日時までカウントダウン</title>

  <style type="text/css">
   body {
    background-color: #689D84;
    }
   #countdown{
    width:22em;
    margin: 2em;
    color:#666;
    font: 2em bold;
    text-align: center;
    padding: 2em;
    background:#fcfaf5;
    border-radius: 0.3em;
    border-bottom: solid 0.12em #777;
    border-right: solid 0.12em #777;
    }
  </style>

 </head>

 <body>
   <div id="countdown">
   </div>
   <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
   <script>
   function countdowntimer(){
    var countdown = setTimeout(function(){
     var today = new Date();//今の日時
     var targetDay = new Date('2019/01/01 00:00:00');//ターゲットの日時
     var daysBetween = Math.ceil((targetDay - today) / (24*60*60*1000));//経過日時を1日のミリ秒で割る
     var remainDay = (targetDay - today);//残り日時
     if (remainDay >= 0){//もし残りの日時が0より多かったら、
      var h = Math.floor(remainDay / 3600000);//残りの日時を1hで割った時間を取得(1h=3600000ms)
      var h1 = h % 24;//hを24で割った余り
      var m = Math.floor((remainDay - h * 3600000) / 60000);//分を取得(1分=60000 ms)
      var s = Math.round((remainDay - h * 3600000 - m * 60000) / 1000);//秒を取得(1秒=1000ms)
      $("#countdown").text("元旦まで"+ daysBetween + "日と" + h1 + "時間" + m + "分" +s + "秒です。");//htmlに出力
      if ((h == 0) && (m == 0) && (s == 0)) {//指定の日時が来たら、
        clearTimeout(countdown);//ウントダウンを止める
        $("#countdown").text("お正月です");//htmlに出力
        }
      }else{//指定の日時が過ぎてもテキストを表字させる用
        $("#countdown").text("2019年1月1日 00:00:00を過ぎています。");
      }
    }, 1000);//処理を1秒後に予約
   }

   countdowntimer();

   </script>

 </body>
</html>

時間取得、1秒=1000msで計算するのがややこしかったですね〜!

さて、次回はこれをワードプレスに実装してみますよ。
お楽しみに(^^)/

コメントを残す