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 - 時間計數器自開始日期和時間

回答

相關問題