javascript - JavaScript 中的 Date() 方法

Question

我有一个 Javascript 倒数计时器，允许用户输入特定时间，例如(15 分钟 - 00:15:00)。然后，脚本将确定我当前拥有的日期和时间。然后，它会在当前时间和日期的基础上增加 15 分钟。

例如，设置时间为15分钟，当前时间为20:00:00(晚上8点)。

脚本会知道 20:15:00 是我的结束时间，它会像普通计时器那样计算剩余时间。

但是，如果设置时间超过 23:00:00(11pm，因为 12am 是 00:00:00 军用时间)，日期不会递增，时间通常加起来为 25:00:00++现在是日期和时间的无效输入。

请帮忙。如果在添加另一天时超过 23:00:00，我如何使时间从 00:00:00 继续计数？

我尝试使用三元运算符，但它无法正常工作。

请参阅我的源代码以供引用:

var hour = document.getElementById("hrs").value;
    var min = document.getElementById("mins").value;
    var sec = document.getElementById("sec").value;
    var newTime = new Date();
    var curr_year = newTime.getFullYear();
    var curr_Month = newTime.getMonth();
    var curr_date = newTime.getDate();
    var todayDate = (curr_year + " " + (curr_Month + 1) + " " + curr_date);
    

    newTime.setHours(newTime.getHours() + hour);
    newTime.setMinutes(newTime.getMinutes() + min);
    newTime.setSeconds(newTime.getSeconds() + sec);
    var newTime = (newTime.getHours() + parseInt(hour)) + ":" + (newTime.getMinutes() + parseInt(min)) + ":" + (newTime.getSeconds() + parseInt(sec));
    var timeDateNow = todayDate + " " + newTime;

function myTime1() {
    var hour = document.getElementById("hrs").value;
    var min = document.getElementById("mins").value;
    var sec = document.getElementById("sec").value;
    var newTime = new Date();
    var curr_year = newTime.getFullYear();
    var curr_Month = newTime.getMonth();
    var curr_date = newTime.getDate();
    var todayDate = (curr_year + " " + (curr_Month + 1) + " " + curr_date);
    
    var newTime = (((newTime.getHours() + parseInt(hour)) > 25 ? (newTime.getHours() + parseInt(hour)) - 25 : (newTime.getHours() + parseInt(hour)))
    + ":" + 
    ((newTime.getMinutes() + parseInt(min)) > 60 ? (newTime.getMinutes() + parseInt(min)) - 60 : (newTime.getMinutes() + parseInt(min))) 
    + ":" + 
    ((newTime.getSeconds() + parseInt(sec)) > 60 ? (newTime.getSeconds() + parseInt(sec)) - 60 : (newTime.getSeconds() + parseInt(sec))));

    alert(newTime);
    

    var timeDateNow = todayDate + " " + newTime;

    // alert(timeDateNow);
    $.post('updateTimerTime.php',
    {
        'timer1_update'     : true,
        'timeInitiate'      : timeDateNow
    }, function(data, status) 
    {
        // alert(data);
    });
    // alert(newTime);
    location.reload();
}
var gettingTimerTime = "<?php echo $time_1; ?>";
var countDownDate = new Date(gettingTimerTime).getTime();

var x = setInterval(function() {

    var now = new Date().getTime();

    var distance = countDownDate - now;
    
    var hours = (Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))) < 10 ? "0"+(Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))) : (Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)));
    var minutes = (Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))) < 10 ? "0"+(Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))) : (Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)));
    var seconds = (Math.floor((distance % (1000 * 60)) / 1000)) < 10 ? "0" + (Math.floor((distance % (1000 * 60)) / 1000)) : (Math.floor((distance % (1000 * 60)) / 1000));
    document.getElementById("timetimer1").innerHTML = hours + ":"
    + minutes + ":" + seconds;

    if (distance < 0) {
        clearInterval(x);
    $.post('updateSwitch1.php', {
        'updateSwitchToOff1' : true
    }, function(data,status){
        // alert(status);
    });
        document.getElementById("timetimer1").innerHTML = "00:00:00";
    }
}, 1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<form method="post">
<div>
  <div class="row justify-content-center" style="
  text-align: center;margin-bottom: 20px; z-index: 1;">
<input type="number" id="hrs" value="00" style="width: 40px; text-align: center;" maxlength="2">
<input type="number" id="mins" value="00" style="width: 40px; text-align: center;" maxlength="2">
<input type="number" id="sec" value="00" style="width: 40px; text-align: center;" maxlength="2">
<input type="button" id="btnTime1" onclick="myTime1()" value="Go">

  </div>
  <div>
  </div><br>
  <div class="row" style="z-index: 1;">
    <p id="timetimer1" style="font-size: 50px; text-align: center;"></p>
  </div>
</div>
</form>

Answer 1

I have a Javascript countdown timer that will allow the user to enter a particular time e.g(15mins - 00:15:00). Then, the script will determine the date and time I currently have. Then, it will add 15 minutes on top of the current time and date.

var incr = 1000 * 60 * 15; // 15 min
var date = new Date();
var incrDate = new Date(date.getTime() + incr);

Date.prototype.getTime 将为您提供以毫秒为单位的当前日期时间，因此如果您添加 15 分钟的毫秒值，然后将其传递给 Date 构造函数，您将获得一个新的 Date 对象指定的日期和时间。