jQuery时钟计数器

时间:2016-12-14 22:26:12

标签: javascript jquery

我试图创建一个简单的jQuery Time计时器,只是为了计算用户在我的应用程序中显示小时和分钟的工作时间

HTML:

<body>
   <div><input type="text" class="time"/></div>
</body>

JS:

function startTimer(duration) {
   var timer = duration,hours, minutes;
   setInterval(function () {
        hours   = parseInt(timer / 3600, 10)
        minutes = parseInt(timer / 60, 10);

        hours   = hours   < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;

        $('input[type=text].time').val(hours + ":" + minutes);

        if (++timer < 0) {
           timer = 0;
        }

    }, 1);
}

jQuery(function ($) {
  var minutes = 0
  startTimer(minutes);
});

小提琴: http://jsfiddle.net/df773p9m/1856/

问题在于,此时计数器在达到60分钟时不会重置并继续计数,尽管时间已更新。

注意:我已将间隔设置为1毫秒,以便测试操作。

2 个答案:

答案 0 :(得分:1)

http://jsfiddle.net/df773p9m/1859/

如果您的计时器在几分钟内,并且它一次计数一分钟,您希望将总时间除以60以获得小时数。然后,您可以使用模运算符%获取剩余分钟的余数:

function startTimer(duration, display) {
    var timer = duration,
    hours, 
    minutes;

    setInterval(function () {
        hours   = parseInt(timer / 60, 10);
        minutes = parseInt(timer % 60, 10);

        hours   = hours   < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;

        $('#time').val(hours + ":" + minutes);

        // I have no idea what you're trying to do here, it appears this will never evaluate to true:
        if (++timer < 0) {
            timer = duration;
        }


    }, 100); // this number should be changed to 60000 for it to be one minute (60,000 milliseconds = 1 minute)


}

jQuery(function ($) {
    var minutes = 0,
        display;
    startTimer(minutes, display);
});

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder_()

  

剩余(%)

     

余数运算符返回剩余的余数   操作数除以第二个操作数。它总是需要的标志   红利,而不是除数。它使用内置的模数函数   产生结果,这是将var1除以的整数余数   var2 - 例如 - var1 modulo var2。有一个建议得到一个   ECMAScript的未来版本中的实际模运算符   区别在于模运算符结果将采用符号   除数,而不是红利。

答案 1 :(得分:1)

你应该在分割后使用%,否则它会继续

检查此更新的jsfiddle

修改

Sean是对的,我已经修好了代码,24应该在%而不是分区中也注意到我将持续时间乘以60以获得秒的分钟

不再需要重置分钟线

function startTimer(duration) {
    var timer = duration*60,hours, minutes;
    setInterval(function () {
            hours   = parseInt((timer / 3600)%24, 10)
        minutes = parseInt((timer / 60)%60, 10);

        hours   = hours   < 10 ? "0" + hours : hours;
        minutes = minutes < 10 ? "0" + minutes : minutes;

        $('input[type=text].time').val(hours + ":" + minutes);

        if (++timer < 0) {
            timer = 0;
        }
    }, 1);
}

jQuery(function ($) {
    var minutes = 1339;
    startTimer(minutes);
});