个人中心
gpt4 book ai didi

javascript - 日期/时间问题 - Moment.js

转载 作者：行者123 更新时间：2023-12-03 06:22:47 25 4
gpt4 key购买 nike

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

谢谢!!

最佳答案

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

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

至:

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

并且 nextTrain 的计算已关闭。

关于javascript - 日期/时间问题 - Moment.js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38792170/

25 4 0
文章推荐： javascript - 在 Knockout 中设置动态填充选择的值
文章推荐： javascript - 如何在 Tableau 中自定义 PDF？
文章推荐： jquery - 如何解析ajax请求的json响应？
文章推荐： javascript - 使用 JS 脚本更改 Td 类值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com