如何在文本输入框中创建一个倒计时器？

Question

以下是一个可正常工作的JavaScript倒计时器：

    <h1><span id='countdown'><?php echo $dbSessionDuration; ?></span></h1>

...

  $(document).ready(function() {
    var time = <?php echo json_encode($dbSessionDuration); ?>,
      parts = time.split(':'),
      hours = +parts[0],
      minutes = +parts[1],
      seconds = +parts[2],
      span = $('#countdown');


    function correctNum(num) {
      return (num<10)? ("0"+num):num;
    }

    var timer = setInterval(function(){
        seconds--;
        if(seconds == -1) {
            seconds = 59;
            minutes--;

            if(minutes == -1) {
                minutes = 59;
                hours--;

                if(hours==-1) {
                  alert("timer finished");
                  clearInterval(timer);
                  return;
                }
            }
        }
        span.text(correctNum(hours) + ":" + correctNum(minutes) + ":" + correctNum(seconds));
    }, 1000);

});

现在我想做的是利用上面的例子来进行操作，实现相反的功能 - 创建一个以 00:00:00 (小时、分、秒) 开始的计时器。

但问题是它没有工作。什么都没有发生。我不知道在下面的函数中是否需要小时数，因为作为倒计时，小时数可以增加到任意多小时。但我的问题是如何修复这个计时器，使其完全正常工作？

<p><input type='text' class='responseTime' name='responsetime' value='00:00:00' /></p>

...

$(document).ready(function() {
var response = "00:00:00",
      parts = time.split(':'),
      hours = +parts[0],
      minutes = +parts[1],
      seconds = +parts[2],
      input = $('.responseTime');


    function correctResponse(responsenum) {
      return (responsenum<10)? ("0"+responsenum):responsenum;
    }

    var responsetimer = setInterval(function(){
        seconds--;
        if(seconds == +59) {
            seconds = 00;
            minutes--;

            if(minutes == +59) {
                minutes = 00;
                hours--;

                  return;

            }
        }
        input.text(correctResponse(hours) + ":" + correctResponse(minutes) + ":" + correctResponse(seconds));
    }, 1000);


  });

更新：

另外需要注意的是，我发现倒计时器每秒钟实际上在以2秒的速度倒数。如何解决这个问题并将其包含在计时器中？

下面的代码我已经更改，包括增量++和使用.val而不是.text，但它开始于00:00:00，然后仅降到00:59:60，最后停止运行：

var response = "00:00:00",
          parts = time.split(':'),
          hours = +parts[0],
          minutes = +parts[1],
          seconds = +parts[2],
          input = $('.responseTime');


        function correctResponse(responsenum) {
          return (responsenum<10)? ("0"+responsenum):responsenum;
        }

        var responsetimer = setInterval(function(){
            seconds++;
            if(seconds == +59) {
                seconds = 00;
                minutes++;

                if(minutes == +59) {
                    minutes = 00;
                    hours++;

                      return;

                }
            }
            input.val(correctResponse(hours) + ":" + correctResponse(minutes) + ":" + correctResponse(seconds));
        }, 1000);


      }); 

- user1914374

---

不确定我是否遗漏了什么，但看起来你正在递减秒数，但检查它是否是一个正数。也许你应该尝试递增？ - Rake36

@Rake36 请查看更新。 - user1914374

@user1914374：请不要在获得新答案时不断更改或更新您的问题。 - Oerd

不，没关系，只是不要改变它，使得这个问题变成另一个问题 ;) - Oerd

在您更新的代码的第一行中使用 time = "00:00:00"。这对我有效。 - tcooc

Answer 1

你可以像这里一样轻松修改当前的倒计时器: http://jsfiddle.net/Sergiu/CDpeJ/3

var timer = setInterval(function(){
    seconds++;
    if(seconds == 60) {
        seconds = 00;
        minutes++;

        if(minutes == 60) {
            minutes = 00;
            hours++;
        }
    }
    var newTime = hours + ":" + minutes + ":" + seconds;
    if(!newTime.match(/^(20|21|22|23|[01]\d|\d)(([:.][0-5]\d){1,2})$/)) newTime = "finished";
    $('#timeInput').val(newTime);
}, 1000);

- Sergiu

---

房子可以超过24小时，例如如果需要可以延长到32小时。 我只需要更改hours的if语句以包括return就可以了吗？ - user1914374

我想要它在文本输入框中而不是在span标签中。由于计时器在使用您的代码时在文本输入框中无法工作（在尝试实现时从span标签稍作更改），因此我该如何使其在文本输入框中正常工作？ - user1914374

Answer 2

这是我实现计时器的方法：

function startTimer() {
    var time = 0
    setInterval(function(){
        time++
        var sec = time % 60
        var min = (time-sec)/60 % 60
        var hour = (time-sec-min*60)/3600
        var str= hour+':'+("0"+min).slice(-2)+':'+("0"+sec).slice(-2)
        $('.responseTime').val(str)
    },1000);
}

使用类名为responseTime的输入框来显示计时器。(顺便问一下，为什么不使用id呢?)

在适当的时候调用startTimer()函数开始计时(例如在document.onload=startTimer中调用)。

如果您想从非0时间开始计时，请将time设置为适当的秒数。 对于倒计时，请将time++替换为time--(可能需要添加一些逻辑处理time==0)。

- mariusnn

---

对其他人来说，这将非常有用。我已经得到了我的计时器的答案，但如果其他人想创建自己的计时器，你的解决方案是非常好的 +1 - user1914374

很好。其他答案更接近你的代码，所以它们可能更好地回答了你的问题。然而，我认为编写代码时简单明了是关键（因为在某个时候某人（你？）可能需要阅读并理解正在发生的事情）。 - mariusnn

我更喜欢这个答案，因为如果我想做一个在午夜重置的服务器时间时钟，我只需要在第一次检查时执行 if (time == 86399) time = 0;。而且对于那些不知道的人来说，.slice(-number) 是零填充的最佳解决方案，因为它适用于您设置的任何数字位数。 - Eduard

Answer 3

在jQuery中，使用val('value')函数来更改/设置输入字段的值。

将input.text(...)更改为input.val(...) 另外：

1. 在增加秒数后，使用seconds = seconds % 60;将它们重置为0。
2. 此外，考虑使用data-attributes传递值给JavaScript。

- Oerd

Answer 4

我在JSFiddle上添加了Mariusnn的解决方案和Oerd的建议，并在Jquery中将val更改为text。

HTML文件

<body> <h1 style="color:blue">时间</h1> <h2><span class="responseTime" style="color:indianred"></span> </h2> </body>

JS代码

` var startTimer;

startTimer = function() {
var time;
time = 0;
setInterval((function() {
    var hour, min, sec, str;
    time++;
    sec = time % 60;
    min = (time - sec) / 60 % 60;
    hour = (time - sec - (min * 60)) / 3600;
    count = hour + ':' + ('0' + min).slice(-2) + ':' + ('0' + sec).slice(-2);
    $('.responseTime').text(count);
    }), 1000);
   };

$( document ).ready(function() {
    startTimer();
});

`

JS Fiddle的解决方案在这里。

https://jsfiddle.net/hzLf3e38/4/

- Naren Yellavula

Answer 5

计数器尝试这个

var millis = <?php echo $dbSessionDurationTime; ?> ( diff in seconds )

function displaytimer(){
    var hours = Math.floor(millis / 36e5),
        mins = Math.floor((millis % 36e5) / 6e4),
        secs = Math.floor((millis % 6e4) / 1000);
        //Here, the DOM that the timer will appear using jQuery
        $('.count').html(hours+':'+mins+':'+secs);  
}

setInterval(function(){
    millis += 1000;
    displaytimer();
}, 1000);

- fdyahk