如何创build一个JQuery时钟/定时器
我有一个简单的测验应用程序，我想在页面的顶部显示一个不错的计时器/时钟，向用户显示他们已经进行了多久。 （如果我能以某种方式向他们展示一个总计测验时间的计时器，而且这个问题时间的第二个计时器会更酷，但是我应该能够弄清楚如何做到这一点，一旦我有一个计时器工作。
我的问题是：
使用JQuery展示一个简单的计时器/时钟是一个很好的简单的方法吗？ （直JS也行）我知道如何检查时间，但我怎样才能获得递增的秒数？
我自己的search不断引导我到JQuery插件（我想滚动我自己的），还有“事件计时器”，这不是我正在寻找…
您正在寻找setInterval函数，它每x毫秒运行一个函数。
例如：
var start = new Date; setInterval(function() { $('.Timer').text((new Date - start) / 1000 + " Seconds"); }, 1000);
由SLaksbuild议的setInterval正是我需要做我的计时器。 （谢了哥们！）
使用setInterval和这个伟大的博客文章，我最终创build了以下函数来显示我的“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; } $("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);
如果你可以用Moment.js（伟大的库）来使用jQuery，那么就是这样的：
var crClockInit1 = null; var crClockInterval = null; function crInitClock() { crClockInit1 = setInterval(function() { if (moment().format("SSS") <= 40) { clearInterval(crClockInit1); crStartClockNow(); } }, 30); } function crStartClockNow() { crClockInterval = setInterval(function() { $('#clock').html(moment().format('D. MMMM YYYY H:mm:ss')); }, 1000); }
用crInitClock()开始时钟初始化。 这样做是为了同步秒。 如果没有同步，你会在半秒内启动1秒计时器，在实时之后迟到半秒钟。
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);
// 24 hour clock setInterval(function() { var currentTime = new Date(); var hours = currentTime.getHours(); var minutes = currentTime.getMinutes(); var seconds = currentTime.getSeconds(); // Add leading zeros hours = (hours < 10 ? "0" : "") + hours; minutes = (minutes < 10 ? "0" : "") + minutes; seconds = (seconds < 10 ? "0" : "") + seconds; // Compose the string for display var currentTimeString = hours + ":" + minutes + ":" + seconds; $(".clock").html(currentTimeString); }, 1000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="clock"></div>
var eventdate = new Date("January 01, 2014 00:00:00"); function toSt(n) { s="" if(n<10) s+="0" return s+n.toString(); } function countdown() { cl=document.clock; d=new Date(); count=Math.floor((eventdate.getTime()-d.getTime())/1000); if(count<=0) {cl.days.value ="----"; cl.hours.value="--"; cl.mins.value="--"; cl.secs.value="--"; return; } cl.secs.value=toSt(count%60); count=Math.floor(count/60); cl.mins.value=toSt(count%60); count=Math.floor(count/60); cl.hours.value=toSt(count%24); count=Math.floor(count/24); cl.days.value=count; setTimeout("countdown()",500); }
你好，我有一个类似的作业，涉及创build一个JavaScript倒计时钟。 这是我使用的代码。 将上面的代码插入<script language =“Javascript”> </ script>标记之间。 请记住，只是有这个JavaScript不会做太多，如果你没有HTML来显示时钟。 我会留下写给你的HTML。 devise你想要的时钟。
