javascript - 自开始日期和时间以来的时间计数器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26049855/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript - time counter since start date and time
提问by Richard Jones
I have a new business, where I just hired someone to work for me, I am trying to make it easy for her to track her time, so I created a clock in button, that creates a record in a database, I have it pop up a small window, that she can click to clockout when she is done working.
我有一个新公司，我刚刚雇了一个人对我来说有效，我试图让她轻松跟踪她的时间，所以我创建了一个时钟按钮，在数据库中创建了一个记录，我让它弹出打开一个小窗口，当她完成工作时，她可以点击它来计时。
I want it to show her on that popup window a counter that will show how long she has been working, so I want to create a javascript or jQuery that will start at a certain time and count from there. She is on the East Coast, our company is in the Central Timezone, so 1 hour behind her.
我希望它在弹出窗口上向她显示一个计数器，该计数器将显示她工作了多长时间，所以我想创建一个 javascript 或 jQuery，它将在某个时间开始并从那里开始计数。她在东海岸，我们公司在中部时区，所以比她晚 1 小时。
How can I get a javascript to start from a certain time and keep updating the timer, so she can see something like this:
如何让 javascript 从某个时间开始并不断更新计时器，以便她可以看到如下内容：
[You've been working for: 01:01:01 HH::MM::SS] - and it is actively updating, climbing up.
[你一直在工作：01:01:01 HH::MM::SS] - 它正在积极更新，不断攀升。
All the timers I've found are not about time itself, but about starting at a time and counting down, or starting at 0 and counting up.
我发现的所有计时器都不是关于时间本身，而是关于从某个时间开始并倒计时，或从 0 开始并向上计数。
Is there a way to tell it a start time, so that way if she reloads the page, it does not start from 0, but will start at the time she clocked in, then add the time since and start from there?
有没有办法告诉它一个开始时间，这样如果她重新加载页面，它不会从 0 开始，而是从她打卡的时间开始，然后添加时间并从那里开始？
I know it can be done, but I'm more of a Perl guy than a Javascript guy. I'm doing this on Wordpress, so I could use PHP and just tell her to refresh the page to see the current amount of time and then have it on page load show the current amount of time, but I think having a counter would be better and make it easier for her.
我知道这是可以做到的，但我更像是一个 Perl 人而不是一个 Javascript 人。我在 Wordpress 上这样做，所以我可以使用 PHP 并告诉她刷新页面以查看当前时间，然后在页面加载时显示当前时间，但我认为有一个计数器更好，让她更容易。
is there some code already done that I could modify myself to make it work? I cannot find any, anywhere. I'm willing to do all the work, I'm not asking for someone to do it for me.
是否有一些代码已经完成，我可以修改自己以使其工作？我找不到任何，任何地方。我愿意做所有的工作，我不是要求有人为我做。
I found this example someone did:
我发现有人做了这个例子：
function get_uptime() {
var t1 = new Date()
var t2 = new Date()
var dif = t1.getTime() - t2.getTime()
seconds = dif / 1000;
Seconds_Between_Dates = Math.abs(seconds);
document.getElementById("seconds").innerHTML = Seconds_Between_Dates;
setTimeout(get_uptime, 1000);
}
get_uptime();
That is sort of it, but I don't now how to put the first time in t1, what format do I put it in? I can have PHP put it in any format, but not sure the one it needs. Plus this appears to only put the seconds, not hours, minutes and seconds.
就是这样，但我现在不知道如何将第一次放入 t1，我将它放入什么格式？我可以让 PHP 以任何格式放置它，但不确定它需要哪种格式。另外，这似乎只显示秒，而不是小时、分钟和秒。
Is there away to do that?
有没有办法做到这一点？
Thanks, Richard
谢谢，理查德
回答by Philip
From your question I understand you store the date and time on start? So then you can use PHP to echo this information in a starting Date object and let a setInterval-function do the current timegetting and calculation of the time working.
从您的问题中，我了解到您在开始时存储日期和时间？因此，您可以使用 PHP 在起始日期对象中回显此信息，并让 setInterval 函数执行当前时间获取和工作时间计算。
See working example here: http://jsfiddle.net/c0rxkhyz/1/
请参阅此处的工作示例：http: //jsfiddle.net/c0rxkhyz/1/
This is the code:
这是代码：
var startDateTime = new Date(2014,0,1,23,59,59,0); // YYYY (M-1) D H m s ms (start time and date from DB)
var startStamp = startDateTime.getTime();
var newDate = new Date();
var newStamp = newDate.getTime();
var timer; // for storing the interval (to stop or pause later if needed)
function updateClock() {
newDate = new Date();
newStamp = newDate.getTime();
var diff = Math.round((newStamp-startStamp)/1000);
var d = Math.floor(diff/(24*60*60)); /* though I hope she won't be working for consecutive days :) */
diff = diff-(d*24*60*60);
var h = Math.floor(diff/(60*60));
diff = diff-(h*60*60);
var m = Math.floor(diff/(60));
diff = diff-(m*60);
var s = diff;
document.getElementById("time-elapsed").innerHTML = d+" day(s), "+h+" hour(s), "+m+" minute(s), "+s+" second(s) working";
}
timer = setInterval(updateClock, 1000);<div id="time-elapsed"></div>Attention! The month number in the new Date()declaration is minus one (so January is 0, Feb 1, etc)!
注意力！new Date()声明中的月份数为负一（因此一月为 0、二月 1 等）！
回答by kravits88
I would use momentJS fromNowfunction. You can get the time started as variable on page load then call fromNow on that and current time to get time between the two every time the clock is clicked:
我会使用momentJS fromNow函数。您可以在页面加载时将时间作为变量开始，然后在每次单击时钟时调用 fromNow 和当前时间以获取两者之间的时间：
var StartedWorkDateTime = GetStartedTime();
moment(StartedWorkDateTime).fromNow(true);
Non momentJS:
非momentJS：
var date1 = new Date("7/11/2010 15:00");
var date2 = new Date("7/11/2010 18:00");
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffHours = Math.ceil(timeDiff / (1000 * 3600));
alert(diffHours);
回答by gilly3
Get the difference between two dates by subtracting them:
通过减去它们来获取两个日期之间的差异：
var duration = end - start;
This will give you the number of milliseconds between the dates. You can use the milliseconds to figure out hours, minutes, and seconds. Then it's just a matter of string manipulation and writing the value to the page. To update the timer once per second, use setInterval():
这将为您提供日期之间的毫秒数。您可以使用毫秒来计算小时、分钟和秒。那么这只是字符串操作和将值写入页面的问题。要每秒更新一次计时器，请使用setInterval()：
setInterval(writeDuration, 1000);
