Question

我是JS的新手，并且一直致力于这项活动，根据用户输入，创建一个火车时间表（到达时间/下一班火车的频率/时间）等等。我遇到了麻烦正确显示的时间，当我输入到达时间（HH：mm - 军事时间）时，它没有正确格式化，并且时间与输入时间不同。

我的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

谢谢！

Answer 1

问题是您没有显示格式化时间。改变

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

为：

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

并且关闭nextTrain的计算。

日期/时间的麻烦 - Moment.js

1 个答案: