
[code]

    now = new Date();
    n = 0;
    
    xday = new Date(2016, 10 - 1, 13, 4, 31, 0);
    var datef = new Array(24 * 60 * 60 * 1000, 60 * 60 * 1000, 60 * 1000, 1000);
    
    function countDown() {
      var time = new Array(4);
      var deff = Math.abs((now.getTime() + n) - xday.getTime());
      n += 1000;
    
    
    
    
      for (i = 0; i < 4; i++) {
        time[i] = Math.floor(deff / datef[i]);
        deff -= time[i] * datef[i];
      }
      document.Clock.displaymin.value = time[2];
      document.Clock.displaysec.value = time[3];
    
      setTimeout("countDown()", 1000);
    }
    
    countDown();
[/code]

[code]

    <form name="Clock" method="post" action="./">
      電車が駅に到着するまで 来るまであと
      <br>
      <input type="text" name="displaymin" size=2>
      <strong>分</strong> 
      <input type="text" name="displaysec" size=2>
      <strong>秒</strong> 
    </form>
[/code]

カウントダウンを作りたいと思っています。  
初心者の為なかなか作業が前に進みません。

内容としては、「 **あと××分××秒後** に電車が到着するかという事をリアルタイムでカウントダウンを行うタイマー」を作りたいと思っています。

分と秒を表示しカウントダウンさせるというところまで進みました。

実際、JavaScriptを使いそのようなプログラムを作ることはまず可能でしょうか？

○時刻表  
8:45|9:10|9:25|9:45|10:12|・・・・

このような時刻表を始発から順に終電まで読み取っていきます。  
例えば8:45の電車が通り過ぎたら次の9:10のカウントダウンを始めます。  
※始発（8:45）は電車が到着する20分前からカウントダウンを開始します。  
終電が過ぎたら「 **運行は終了しました** 」という表示を出し、次の日までタイマーをストップしておきたいです。

この一連の流れを休日祝日関係なく毎日繰り返したいと思います。

参考にしたいのでjavascriptのコードを書いていただきたいです。  
図々しくて申し訳ございません。  
回答よろしくお願いします。


CC BY-SA 3.0
2016-10-14T10:09:06.880
29557
2016-10-15T13:02:30.393
2016-10-15T08:38:31.837
3054
19176
question
javascript html
Javascriptで電車発着のリアルタイムカウントダウンをつくりたいです。


このサイトでは[mjyさんが書かれた](https://ja.stackoverflow.com/questions/29557/javascript%E3%81%A7%E9%9B%BB%E8%BB%8A%E7%99%BA%E7%9D%80%E3%81%AE%E3%83%AA%E3%82%A2%E3%83%AB%E3%82%BF%E3%82%A4%E3%83%A0%E3%82%AB%E3%82%A6%E3%83%B3%E3%83%88%E3%83%80%E3%82%A6%E3%83%B3%E3%82%92%E3%81%A4%E3%81%8F%E3%82%8A%E3%81%9F%E3%81%84%E3%81%A7%E3%81%99#comment28500_29557)ようにあまりこのような質問は良く無いとされますが、初心者だとどこから手を出せばいいかわからないことも理解できます。  
大概は実装したい機能をパーツごとに作っていくのが基本では無いでしょうか。機能をできるだけ細かくした上でやり方がわからなければ、そこについて聞いていただくのは大歓迎です。

かなり適当な実装なので`countDown()`がかなり不効率だったり、1日の区切りが深夜12時だったりしますが、実装への手段をお分かりいただければ幸いです。

[code]

    //時刻表の文字列
    var timeTableString = "0:01|8:45|12:00|21:52|23:25";
    
    //↑の文字列をDateに変換して以下の配列に入れる
    var parsedTimeTable = [];
    
    //今日の年月日を取得
    var now = new Date(),
      year = now.getFullYear(),
      month = now.getMonth(),
      day = now.getDate();
    
    //String.split("|")で文字列を時間ごとに分離
    for (var str of timeTableString.split("|")) {
      //さらに時間と分を分離
      var str2 = str.split(":"),
        hour = parseInt(str2[0], 10),
        minute = parseInt(str2[1], 10);
      //配列にnew Dateを入れる
      parsedTimeTable.push(new Date(year, month, day, hour, minute));
    }
    
    //表示用エレメント取得
    var display = document.getElementById("display");
    
    //毎秒呼ぶ関数
    function countDown() {
      var nextTime = null;
      for (time of parsedTimeTable) {
        //まだ過ぎていない時刻を探す
        if ((time.getTime() - Date.now()) > 0) {
          //見つけたらnextTimeに保存してループを抜ける
          nextTime = time;
          break;
        }
      }
      //nextTimeに保存された時間が無ければ今日の分は終わり
      if (nextTime === null) {
        display.innerHTML = "運行は終了しました";
      }　
      else {
        //残りミリ秒をを時間、分、秒に分離
        var diff = time.getTime() - Date.now();
        diff = Math.floor(diff / 1000);
        var hour = Math.floor(diff / (60 * 60));
        diff = diff % (60 * 60);
        var min = Math.floor(diff / 60);
        diff = diff % 60;
        //表示する
        display.innerHTML = "次の電車(" + time.toString() + ")まで" + hour + "時間" + min + "分" + diff + "秒です";
      }
    }
    
    //最初に1度呼ばないと初期表示まで1秒かかってしまう
    countDown();
    //1秒(1000ミリ秒)ごとに呼び出し
    setInterval(countDown, 1000);
[/code]

[code]

    <span id="display"></span>
[/code]


CC BY-SA 3.0
2016-10-15T13:02:30.393
29585
2016-10-15T13:02:30.393
2017-04-13T12:52:39.113
-1
3974
29557
answer