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

我有一个新业务，在那里我雇了一个人为我工作，我试图让她很容易跟踪她的时间，所以我创建了一个按钮的时钟，在数据库中创建一个记录，我弹出一个小窗口，当她完成工作时，她可以点击进行输出。javascript - 时间计数器自开始日期和时间

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

我怎样才能得到一个javascript从某个时间开始，并不断更新计时器，让她能看到这样的事情：

[你已经工作了：1时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把它放在任何格式，但不知道它需要的。此外，这似乎只放秒，而不是小时，分钟和秒。

有没有那样做？

感谢，理查德

来源

2014-09-25 Richard Jones

从你的问题我理解你存储在开始的日期和时间？那么你可以使用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; 
 

 
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"; 
 
} 
 

 
setInterval(updateClock, 1000);

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

注意！ new Date()声明中的月份编号为负1（因此1月份为0，2月1日等）！

来源

2014-09-26 00:30:53 Philip

一个很好的界面来显示工作时间将是：http://flipclockjs.com/ – Philip 2014-09-26 00:34:43

这样做。：）谢谢。 – 2014-09-26 00:49:56

@Philip不错，如果页面上有多个页面？ – 001221 2015-10-27 22:43:20

我会用momentJS fromNow功能。你可以得到的时间开始为在页面加载变量然后调用上和当前时间fromNow每被点击的时钟时间在两者之间取得时间：

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

非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

来源

2014-09-25 23:57:27 kravits88

我试过了，但在任何浏览器上都无法工作。我将它安装在服务器上，但无法在我尝试的任何浏览器（IE，Chrome，Firefox，Safari和Opera）中运行...因此不知道如何使其工作。我花了3天时间试图让它工作，为了我正在做的其他事情。从来没有得到它的工作。 – 2014-09-26 00:01:18

好吧，如果你能使它工作，momentJS对于处理日期非常有用。无论如何，我已经提供了可供选择的解决方案，这将给予不同的时间。您可以根据需要进行格式化。 – kravits88 2014-09-26 00:08:37

尝试。 :)谢谢....我现在看到格式。：o} – 2014-09-26 00:08:42

减去他们得到两个日期之间的差值：

var duration = end - start;

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

setInterval(writeDuration, 1000);

来源

2014-09-26 00:09:11 gilly3

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

回答

相关问题