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

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 函数执行当前时间获取和工作时间计算。

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

这是代码:

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>

注意! new Date() 声明中的月份数字减一(因此一月为 0、二月 1 等)!