Probleme mit Datum/Uhrzeit - Moment.js - Hervorragende Bibliothek

Ich bin neu bei JS und habe an dieser Aktivität gearbeitet, die basierend auf Benutzereingaben eine Tabelle für Zugzeiten (Ankunftszeit/Häufigkeit/Zeit bis zum nächsten Zug) erstellt. usw. Ich habe Probleme damit, die Zeit zu bekommen, um korrekt zu erscheinen, wenn ich die Ankunftszeit (HH: mm - Militärzeit) eingib, es nicht richtig formatiert und die Zeit ist nicht die selbe wie die eingegebene Zeit.Probleme mit Datum/Uhrzeit - Moment.js

Mein JS Code:

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++; 
    } 
});

Und mein 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>

Wenn jemand einen schnellen Blick nehmen und lassen Sie mich wissen, was ich verpasst habe (ich habe auf diese gesucht irgendwann, und vielleicht etwas zu klein angesehen), das wäre sehr zu schätzen! Auch wenn es hilft, habe ich eine JSFiddle dafür erstellt: Fiddle

Danke !!

Quelle

2016-08-05 LearningJS888

Problem ist, dass Sie die formatierte Zeit nicht anzeigen. Ändern

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

zu:

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

und die Berechnung für die nextTrain ausgeschaltet ist.

Quelle

2016-08-05 15:43:05

Ich weiß das zu schätzen. Ich änderte es in 'trainTime.text (moment (nextTrain) .format (" HH: mm "));'. Was ist falsch an der Berechnung für nextTrain? @ bjr-jean – LearningJS888

Der 'nextTrain' erlaubt eine negative Zeit, wenn die Zeit also um 14h beginnt und es momentan 12h ist, kann ich einen Zug vorher bekommen .. und moment.js' diff' Methode gibt Millisekunden zurück wird der Modulo auf die ' FreqGiven' ist in Minuites. Hier ist eine Geige gegabelt: [Arbeitslösung] (https://jsfiddle.net/z2o8274h/2/) –

Vielen Dank, @ Bjr-Jean – LearningJS888

Probleme mit Datum/Uhrzeit - Moment.js

Antwort

Verwandte Themen