時間の取得（カウントダウン） - Html、Javascript、AngularJS

Question

基本的には、スプレッドシートからデータを取り出し、各宇宙船の打ち上げに要した時間を表示する宇宙船打ち上げアプリケーションを構築しようとしています。ところで、私は今Stackについての（いくつかの）質問を見ていましたが、時間が残っているとは思いましたが、包括的ではないようで、私のコードにそれらを実装する方法が混乱しています。ここで

は私のhtmlからの抜粋です：

<h2>Rocket Launch: {{launch.name}}</h2> 
      <p>Time left: x minutes</p> 
      <script> 
      var currentdate = new Date(); 
      var datetime = (currentdate.getMonth()+1) + "/" + currentdate.getDate() + "/" 
      + currentdate.getFullYear() + " " 
      + currentdate.getHours() + ":" 
      + currentdate.getMinutes() + ":" 
      + currentdate.getSeconds(); 
      </script> 

あなたが見ることができるように、私はその後、私がするまで残された時間を表示しようとしている1行目に打ち上げの名前を取得するためにangularJSの$スコープを使用しています打ち上げ...しかし、私はどのようにそうするのか分からないのですか？ 3行目のスクリプト部分では、現在の時刻/日付を表示する方法を見つけましたが、残りの時間（launchtime - currenttime）をHTMLでどのように表示できるのでしょうか？私はちょっと混乱していて、私を案内するいくつかの指針がほしいと思う。

ところで、私はちょうどAngularJSで始まり、いくらかシンプルで有意義なものを組み込むことを望んでいます。新入生であることを申し訳ありません。

ありがとうございました

Answer 1

私はあなたがしなければならないのは、にカウントダウンオブジェクトを追加でカウントダウンアルゴリズム

$scope.CountDown = { 
    getTimeRemaining: function(endtime) { 
     var t = Date.parse(endtime) - Date.parse(new Date()); 
     var seconds = Math.floor((t/1000) % 60); 
     var minutes = Math.floor((t/1000/60) % 60); 
     var hours = Math.floor((t/(1000 * 60 * 60)) % 24); 
     var days = Math.floor(t/(1000 * 60 * 60 * 24)); 
     return { 
     'total': t, 
     'days': days, 
     'hours': hours, 
     'minutes': minutes, 
     'seconds': seconds 
     }; 
    }, 

    initializeClock: function(endtime) { 
     function updateClock() { 
     var t = $scope.CountDown.getTimeRemaining(endtime); 

     $scope.CountDown.days = t.days; 
     $scope.CountDown.hours = ('0' + t.hours).slice(-2); 
     $scope.CountDown.minutes = ('0' + t.minutes).slice(-2); 
     $scope.CountDown.seconds = ('0' + t.seconds).slice(-2); 

     if (t.total <= 0) { 
      $interval.cancel(timeinterval); 
     } 
     } 

     updateClock(); 
     var timeinterval = $interval(updateClock, 1000); 
    } 
} 

を書くために数分かかりました範囲と電話$scope.CountDown.initializeClock($scope.launch.date);

は、私はあなたのHTMLビュー

Answer 2

これは役に立ちます。以下は、基本的なカウントダウンを処理する非常に簡単な方法です。 「カウンター」に任意の数字を設定します。その後、あなたのHTMLにIDカウントを持つスパンを持っていれば、そのトリックを行うべきです。これをあなたのコードに実装できるかもしれません。

HTML：

<span id="count"></span> 

JS

var counter = 91; 

setInterval(function() { 
    counter--; 
    if (counter >= 0) { 
     span = document.getElementById("count"); 
     span.innerHTML = counter; 

Answer 3

チェックhereにCountDown.days、CountDown.hours、CountDown.minutesとCountDown.secondsを表示することができ、ここでhttps://plnkr.co/edit/x0BkVPgPLjD8rtbfADtY?p=preview

plunkerを作りました。 2つの日付の違いを見つける方法について説明します。あなたは、現在の時刻とともに日付形式で時刻を起動させる必要があります。

ここで両方の日付があるので、ここで賢明になる必要があります。

パート1：2つの日付の違いによって、ミリ秒単位の違いが得られるため、希望する形式（0日、1時間、1分、10秒など）に戻す必要があります。 。

パート2：カウントダウンのように見えるように毎秒更新したいと仮定しています。これを行うには、私は関数の中で説明してきたすべてを行うとスコープ変数に結果を代入する必要があります。

var countdown = function() { 
    var launchTime = new Date(//whatever it is); 
    var currentTime = new Date(//current Time); 
    var difference = (launchTime - currentTime) 
    $scope.currentTimeLeft = difference; //this is in milliseconds. If you don't want that you'll have to do some logic 
} 

次に、あなたのhtmlにあなたは、このことにより、currentTimeLeftにアクセスできるようになります：

<p>Time left: {{currentTimeLeft}} minutes</p> 

ただし、これは1回だけ計算され、1秒後に文字通り「古い」となります。したがって、毎秒カウントダウン関数を呼び出すsetInterval関数を追加することができます。

setInterval(function(){ countdown() }, 1000); //1000 == 1 second. 

また、カウントダウン機能を毎秒を呼び出すためにネイティブAngularJS $intervalを使用して見て可能性があります。