我有一个简单的测验应用程序，我想在页面顶部显示一个漂亮的计时器/时钟，向用户显示他们已经走了多长时间。（如果我能以某种方式向他们展示 Total Quiz Time 的计时器，以及 This Question Time 的第二个计时器，那就更酷了，但是一旦我有一个计时器工作，我应该能够弄清楚如何做到这一点。
我的问题是：
使用 JQuery 显示一个简单的计时器/时钟的好方法是什么？（直接 JS 也可以）我知道如何检查时间，但是如何获得递增的秒数？
我自己的搜索一直引导我使用 JQuery 插件（我想推出自己的插件）以及“事件计时器”，这不是我想要的......
您正在寻找setInterval每x毫秒运行一个函数的函数。
例如：
var start = new Date;
setInterval(function() {
$('.Timer').text((new Date - start) / 1000 + " Seconds");
}, 1000);
SLaks 建议的 setInterval 正是我制作计时器所需的。（谢了哥们！）
使用 setInterval 和这篇很棒的博客文章，我最终创建了以下函数来在我的“box_header”div 中显示一个计时器。我希望这可以帮助其他有类似要求的人！
function get_elapsed_time_string(total_seconds) {
function pretty_time_string(num) {
return ( num < 10 ? "0" : "" ) + num;
}
var hours = Math.floor(total_seconds / 3600);
total_seconds = total_seconds % 3600;
var minutes = Math.floor(total_seconds / 60);
total_seconds = total_seconds % 60;
var seconds = Math.floor(total_seconds);
// Pad the minutes and seconds with leading zeros, if required
hours = pretty_time_string(hours);
minutes = pretty_time_string(minutes);
seconds = pretty_time_string(seconds);
// Compose the string for display
var currentTimeString = hours + ":" + minutes + ":" + seconds;
return currentTimeString;
}
var elapsed_seconds = 0;
setInterval(function() {
elapsed_seconds = elapsed_seconds + 1;
$('#box_header').text(get_elapsed_time_string(elapsed_seconds));
}, 1000);
################## JQuery (use API) #################
$(document).ready(function(){
function getdate(){
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
if(s<10){
s = "0"+s;
}
if (m < 10) {
m = "0" + m;
}
$("h1").text(h+" : "+m+" : "+s);
setTimeout(function(){getdate()}, 500);
}
$("button").click(getdate);
});
################## HTML ###################
<button>start clock</button>
<h1></h1>
两全其美呢？我将答案与 OP 的格式结合起来。
function pretty_time_string(num) {
return ( num < 10 ? "0" : "" ) + num;
}
var start = new Date;
setInterval(function() {
var total_seconds = (new Date - start) / 1000;
var hours = Math.floor(total_seconds / 3600);
total_seconds = total_seconds % 3600;
var minutes = Math.floor(total_seconds / 60);
total_seconds = total_seconds % 60;
var seconds = Math.floor(total_seconds);
hours = pretty_time_string(hours);
minutes = pretty_time_string(minutes);
seconds = pretty_time_string(seconds);
var currentTimeString = hours + ":" + minutes + ":" + seconds;
$('.timer').text(currentTimeString);
}, 1000);
24 小时制：
setInterval(function(){
var currentTime = new Date();
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var seconds = currentTime.getSeconds();
// Add leading zeros
minutes = (minutes < 10 ? "0" : "") + minutes;
seconds = (seconds < 10 ? "0" : "") + seconds;
hours = (hours < 10 ? "0" : "") + hours;
// Compose the string for display
var currentTimeString = hours + ":" + minutes + ":" + seconds;
$(".clock").html(currentTimeString);
},1000);