Question

如何从时间值中减去分钟数？假设用户选择12:20 am ，结果将等于11:10 pm ，因为它会自动减去70分钟。我开始这样做，但我不知道如何继续。

<select id="selectHour">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
</select>

<select id="selectMinute">
    <option value="00">00</option>
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="15">15</option>
    <option value="20">20</option>
    <option value="25">25</option>
    <option value="30">30</option>
    <option value="35">35</option>
    <option value="40">40</option>
    <option value="45">45</option>
    <option value="50">50</option>
    <option value="55">55</option>
</select>

<select id="selectAMPM">
    <option value="am">am</option>
    <option value="pm">pm</option>
</select>

<button onclick="myFunction()">Get Result</button>
<p id="result"></p>

    function myFunction() {
        var hour = document.getElementById("selectHour").value; 
        var minute = document.getElementById("selectMinute").value; 
        var ampm = document.getElementById("selectAMPM").value; 
        document.getElementById("result").innerHTML = hour + ":" + minute + " " + ampm; 
    }

</script>

Answer 1

注意：对于这两个示例，我假设减去70分钟（如您的示例中所述），但代码可以编辑另一个数量。

如果你可以使用第三方库，例如moment.js，那就变得非常简单：

myFunction = function() {
    var hour = document.getElementById("selectHour").value; 
    var minute = document.getElementById("selectMinute").value; 
    var ampm = document.getElementById("selectAMPM").value;
    var time = hour + ":" + minute + " " + ampm;
    var m = new moment(time, 'h:m a');

    document.getElementById("result").innerHTML = m.subtract(70, 'minutes').format('h:m a'); 
}

您可以在此处查看示例：jsFiddle

如果moment.js不是一个选项，那么您可以使用以下内容作为起点。

注意： Javascript没有像我预期的那样使用负值创建mod，所以我根据这里的答案创建了自己的：SO Post

mod = function(a, b) {
    return ((a%b)+b)%b;
}

myFunction = function() {
    // convert hour and minute to integer values
    var hour = parseInt(document.getElementById("selectHour").value); 
    var minute = parseInt(document.getElementById("selectMinute").value); 
    var ampm = document.getElementById("selectAMPM").value;

    // convert to 24 hour time
    if (ampm === "pm" && hour > 12) hour += 12;
    if (ampm === "am" && hour === 12) hour = 0; 

    // Get the time and minutes you want to subtract in hours
    var timeInHours = hour + (minute / 60);
    var timeToSubtractInHours  = 70 / 60;

    // Get the difference in time
    var timeDiff = (timeInHours - timeToSubtractInHours);

    // Get the mod to make sure it's between 0-23
    var modDiff = mod(timeDiff,24);

    // Pull out the hours and minutes
    var h = modDiff | 0
    var min = (modDiff % 1) * 60 | 0;

    // Print the time
    document.getElementById("result").innerHTML = h + ":" + min;
}

这个例子没有转换回12小时的时间（上午和下午），但我认为这很简单，可以省略。可能有更简单，更快捷的方法，但这是我第一次来到这里。但是你认为合适了。

请在此处查看示例：jsFiddle

Answer 2

这段代码会让javascript DateTime逻辑为你做数学运算。它考虑到JS不喜欢时间，但DateTimes，只是隐藏日期部分。它需要当前的日期和时间，用您在下拉菜单中选择的任何内容替换时间部分，使用一些标准的JS日期时间函数来提供正确的结果，并以12小时格式显示结果。我没有花时间做错误处理（例如没有值输入几分钟来减去）。你自己在那里......

<html>
   <body>
        <select id="selectHour">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        </select>

        <select id="selectMinute">
        <option value="00">00</option>
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="15">15</option>
        <option value="20">20</option>
        <option value="25">25</option>
        <option value="30">30</option>
        <option value="35">35</option>
        <option value="40">40</option>
        <option value="45">45</option>
        <option value="50">50</option>
        <option value="55">55</option>
        </select>

        <select id="selectAMPM">
        <option value="am" selected>am</option>
        <option value="pm">pm</option>
        </select>

    <p>
    <input id="valueToSubtract"/>&nbsp;Minutes to subtract<br/>
    <button onclick="myFunction()">Get Result</button>
    <p id="result"></p> 


    <script>
       function myFunction() {
            // Grab values from the UI
            //
            var hour = document.getElementById("selectHour").value; 
            var minute = document.getElementById("selectMinute").value;
            var ampm = document.getElementById("selectAMPM").value; 

            // Look for times AFTER 12 noon [1pm...11:59pm]
            //
            if ((ampm == "pm") && (hour != 12))
            {
              hour = (hour * 1) + 12;
            }

            // Special case:  look for 12 midnight
            // 
            if ((ampm == "am") && (hour == 12))
            {
              hour = 24;
            }



            // Javascript doesn't like times, it likes DateTimes.  Get the current date and time...
            //
            var fakeDateTime = new Date();

            // ... now plug the UI-selected times in place of the current time
            fakeDateTime.setHours(hour, minute, 0);

            // Finally, subtract the value in minutes, letting JS handle rolling over hour boundaries and such
            //
            fakeDateTime.setMinutes(fakeDateTime.getMinutes() - document.getElementById("valueToSubtract").value);



            document.getElementById("result").innerHTML = fakeDateTime.toLocaleString('en-US', { hour: 'numeric', minute: 'numeric', hour12: true })
        }

        </script>
    </body>
</html>

从所选值中减去分钟数

2 个答案: