Question

我有一个新的业务，我只是雇了一个人为我工作，我试图让她很容易跟踪她的时间，所以我创建了一个按钮时钟，在数据库中创建一个记录，我让它弹出一个小窗口，当她完成工作时，她可以点击进行计时。

我希望它在弹出窗口中显示一个计数器，显示她已经工作了多长时间，所以我想创建一个javascript或jQuery，它将在某个时间开始并从那里开始计数。她在东海岸，我们公司在中央时区，所以在她身后1小时。

如何从特定时间开始使用javascript并继续更新计时器，以便她可以看到如下内容：

[你一直在为：01：01：01 HH :: MM :: SS] - 它正在积极更新，爬上去。

我发现的所有计时器都不是关于时间本身，而是关于一次开始倒计时，或从0开始计数。

有没有办法告诉它一个开始时间，所以如果她重新加载页面，它不会从0开始，但会在她进入时开始，然后添加时间从那里开始？

我知道可以做到，但我更像是一个Perl家伙，而不是一个Javascript家伙。我在Wordpress上这样做，所以我可以使用PHP并告诉她刷新页面以查看当前的时间量，然后让它在页面加载时显示当前的时间量，但我认为有一个计数器将是更好，让她更容易。

是否有一些代码已经完成，我可以修改自己以使其工作？我找不到任何地方。我愿意做所有的工作，我不是要求有人为我做这件事。

我发现这个例子有人做了：

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();

就是这样，但我现在不知道如何将第一次放在t1中，我将它放入哪种格式？我可以让PHP以任何格式放置它，但不确定它需要它。此外，这似乎只是放秒，而不是小时，分钟和秒。

有没有那样做？

谢谢，理查德

Answer 1

根据您的问题，我了解您在开始时存储日期和时间？那么您可以使用PHP在起始Date对象中回显此信息，并让setInterval函数执行当前的timegetting和计算工作时间。

请参阅此处的工作示例：http://jsfiddle.net/c0rxkhyz/1/

这是代码：

＆＃ 13;

＆＃13;

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);

＆＃13;

<div id="time-elapsed"></div>

＆＃13;

注意！ new Date()声明中的月份数减1（因此1月是0，2月1日等）！

Answer 2

通过减去它们来获得两个日期之间的差异：

var duration = end - start;

这将为您提供日期之间的毫秒数。您可以使用毫秒来计算小时，分钟和秒。然后，这只是字符串操作和将值写入页面的问题。要每秒更新一次计时器，请使用setInterval()：

setInterval(writeDuration, 1000);

Answer 3

我会使用momentJS fromNow功能。您可以在页面加载时将时间作为变量启动，然后在每次点击时钟时从当前时间调用fromNow以获取时间：

var StartedWorkDateTime = GetStartedTime();
moment(StartedWorkDateTime).fromNow(true);

Non 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);

reference

javascript - 自开始日期和时间以来的时间计数器

3 个答案: