我试图创建一个简单的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毫秒,以便测试操作。
答案 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);
});
剩余(%)
余数运算符返回剩余的余数 操作数除以第二个操作数。它总是需要的标志 红利,而不是除数。它使用内置的模数函数 产生结果,这是将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);
});