javascript - 如何在文本输入中创建一个计数计时器？

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);


      }); 

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);