與日期/時間的問題 - 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>

如果有人可以快速瀏覽一下，讓我知道什麼，我已經錯過了（我看過本作有些時候，可能會看起來很小），這將不勝感激！另外，如果有幫助，我爲它創建了JSFiddle：Fiddle

謝謝！

來源

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'允許負時間，所以如果時間從14小時開始，現在是12小時，那麼我可以在此之前得到一列火車..和moment.js'diff'方法返回毫秒將模數轉換爲' freqGiven'在minuites。這裏是我分叉的小提琴：[工作解決方案]（https://jsfiddle.net/z2o8274h/2/） –

非常感謝，@ bjr-jean – LearningJS888

與日期/時間的問題 - Moment.js

回答

相關問題