日時のトラブル - Moment.js

私はJSを初めて使い、ユーザーの入力に基づいて、列車の時間（到着時間/周波数/次の列車までの時間）のテーブルを作成するこの活動に取り組んでいます。私は到着時間（HH：mm-軍事時間）を入力すると正しく表示される時間を得ることに問題があり、正しくフォーマットせず、入力された時間と同じではありません。日時のトラブル - Moment.js

マイJSコード：

var trainCounter = 0; 
$(document).on("click", '#addTrain', function() { 

    var nameGiven = $('#trainName').val().trim(); 
    var placeGiven = $('#place').val().trim(); 
    var timeGiven = $('#trainTime').val().trim(); 
    var freqGiven = $('#freq').val().trim(); 
    freqGiven = parseInt(freqGiven); 

    console.log("Name/Place/Time/Frequency: " + nameGiven + "|" + placeGiven + "|" + timeGiven + "|" + freqGiven); 

    var firstTimeConverted = moment(timeGiven, "HH:mm").subtract(1, "years"); 
    console.log("TIME CONVERTED: " + firstTimeConverted); 

    var diffTime = moment().diff(moment(firstTimeConverted), "minutes"); 
    console.log("DIFFERENCE IN TIME: " + diffTime); 

    var timeRemaining = diffTime % freqGiven; 
    console.log(timeRemaining); 

    var minTilTrain = freqGiven - timeRemaining; 
    console.log("MINUTES TILL TRAIN: " + minTilTrain); 

    var nextTrain = moment().add(minTilTrain, "minutes"); 
    console.log("ARRIVAL TIME: " + moment(nextTrain).format("HH:mm")); 

    var row = $('<tr>'); 

    var trainName = $('<td>'); 
    trainName.text(nameGiven); 
    row.append(trainName); 

    var trainPlace = $('<td>'); 
    trainPlace.text(placeGiven); 
    row.append(trainPlace); 

    var trainTime = $('<td>'); 
    moment(nextTrain).format("HH:mm"); 
    trainTime.text(nextTrain); 
    row.append(trainTime); 

    var trainFreq = $('<td>'); 
    trainFreq.text(freqGiven); 
    row.append(trainFreq); 

    var minutesUntilNext = $('<td>'); 
    minutesUntilNext.text(minTilTrain); 
    row.append(minutesUntilNext); 

    var trainLocalStorage = row.prop('outerHTML'); 
    console.log(trainLocalStorage); 
    localStorage.setItem("data-train-" + trainCounter, trainLocalStorage); 

    nameGiven = $('#trainName').val(""); 
    placeGiven = $('#place').val(""); 
    timeGiven = $('#trainTime').val(""); 
    freqGiven = $('#freq').val(""); 

    $('#trainTable').append(trainLocalStorage); 
    trainCounter++; 

    return false; 

}); 

$(document).ready(function() { 

    for(var i = 0; i < localStorage.length; i++) 
    { 
     $('#trainTable').append(localStorage.getItem("data-train-" + trainCounter)); 
     trainCounter++; 
    } 
});

そして、私のHTML：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Train Schedule</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script> 
    <script src="https://cdn.jsdelivr.net/momentjs/2.12.0/moment.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="assets/css/style.css"> 
</head> 
<body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-md-12 jumbotron"> 
      <h1 class="text-center">TRAIN TIME</h1> 
      <h2 class="text-center">Chooooo Chooooo</h3> 
      <h5 class="text-center">Sheldon Cooper goes wild.</h5> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="panel panel-primary"> 
       <div class="panel-heading"> 
       Current Train Schedule 
       </div> 
        <div class="panel-body" id="trainTableContainer"> 
         <table class="table table-striped" id="trainTable"> 
          <thead> 
           <tr> 
           <th>Train Name</th> 
           <th>Destination</th> 
           <th>Next Arrival</th> 
           <th>Frequency (min)</th> 
           <th>Minutes Away</th> 
           </tr> 
           <tr id="addToThis"> 
           </tr> 
          </thead> 
         </table> 
        </div> 
       </div> 
      </div> 
     </div> 
     <div class="row"> 
      <div class="col-md-12"> 
       <div class="panel panel-primary"> 
       <div class="panel-heading"> 
       Add Train 
       </div> 
        <div class="panel-body"> 
         <form id="userForm"> 
          <label for="userInput" class="changeText">Train Name</label><br> 
          <input type="text" class="userInput" id="trainName"><br> 
          <label for="userInput" class="changeText">Destination</label><br> 
          <input type="text" class="userInput" id="place"><br> 
          <label for="userInput" class="changeText">First Train Time (HH:mm - military time)</label><br> 
          <input type="text" class="userInput" id="trainTime"><br> 
          <label for="userInput" class="changeText">Frequency (min)</label><br> 
          <input type="text" class="userInput" id="freq"><br> 
          <br> 
          <input id="addTrain" type="submit" class="btn-primary" value="Submit"> 
         </form>     
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
<script type="text/javascript" src="assets/javascript/app.js"></script> 
</body> 
</html>

誰もが簡単に見てみて、私は（私はこれを見てきた私が見逃しているものを知っている可能性がある場合少し時間がかかり、何か小さいものを見たかもしれない）、それは大いに評価されるだろう！また、役に立った場合は、

ありがとうございました！

出典

2016-08-05 LearningJS888

問題は、定時の時刻を表示していないことです。

moment(nextTrain).format("HH:mm"); 
trainTime.text(nextTrain);

を変更します。

trainTime.text(moment(nextTrain).format("HH:mm"));

とnextTrainのための計算がオフになっています。

出典

2016-08-05 15:43:05

私はそれを感謝します。私は 'trainTime.text（moment（nextTrain）.format（" HH：mm "））;'に変更しました。 nextTrainの計算が間違っていますか？ @ bjr-jean – LearningJS888

'nextTrain'は負の時間を許します。したがって、時間が14hで始まり、現在12hの場合、それ以前に電車を得ることができます。そしてmoment.js' diff'メソッドはミリ秒を返します。 freqGivenはminuitesにあります。ここで私は二股に分かれています：[Working solution]（https://jsfiddle.net/z2o8274h/2/） –

ありがとう、@ bjr-jean – LearningJS888

日時のトラブル - Moment.js

答えて

関連する問題