Javascript秒錶到MySQL數據庫

Question

所以我需要做的是在我創建的html頁面上有一個開始時間和結束時間。這是技術人員在他開始工作之後就可以開始工作的時間，當他在那天結束時他會停下來計算總時間。現在我已經找到了一堆能做到這一點的代碼，但我需要更進一步。我需要花費時間並通過我的PHP文件發佈它，以便將其保存在我們的MySQL數據庫中創建的表中。

<script type="text/javascript"> 
var duration = 0; 

// Javascript to compute elapsed time between "Start" and "Finish" button clicks 
function timestamp_class(this_current_time, this_start_time, this_end_time, this_time_difference) { 
     this.this_current_time = this_current_time; 
     this.this_start_time = this_start_time; 
     this.this_end_time = this_end_time; 
     this.this_time_difference = this_time_difference; 
     this.GetCurrentTime = GetCurrentTime; 
     this.StartTiming = StartTiming; 
     this.EndTiming = EndTiming; 
    } 

    //Get current time from date timestamp 
    function GetCurrentTime() { 
    var my_current_timestamp; 
     my_current_timestamp = new Date();    //stamp current date & time 
     return my_current_timestamp.getTime(); 
     } 

    //Stamp current time as start time and reset display textbox 
    function StartTiming() { 
     this.this_start_time = GetCurrentTime();  //stamp current time 
     document.TimeDisplayForm.TimeDisplayBox.value = 0;  //init textbox display to zero 
     } 

    //Stamp current time as stop time, compute elapsed time difference and display in textbox 
    function EndTiming() { 
     this.this_end_time = GetCurrentTime();   //stamp current time 
     this.this_time_difference = (this.this_end_time - this.this_start_time)/1000; //compute elapsed time 
     document.TimeDisplayForm.TimeDisplayBox.value = this.this_time_difference;  //set elapsed time in display box 
     } 

var time_object = new timestamp_class(0, 0, 0, 0); //create new time object and initialize it 

//--> 

function assignDuration() 
{ 
    document.stopform.duration.value = duration; 
} 
</script> 

    <form> 
     <input type="button" value="Start" onClick="time_object.StartTiming()"; name="StartButton"> 
    </form> 
    <form> 
     <input type="button" value="Finish" onClick="time_object.EndTiming()"; name="EndButton"> 
    </form> 

<form name="stopform" action="process-form.php" method="POST"> 
    <input type="hidden" name="duration" value="0"/> 
    <input type="submit" name="dostop" onClick="assignDuration()" value="Stop"/> 
</form> 

提前致謝！

Answer 1

只要您啓用了JavaScript，您可以創建一個隱藏的表單元素，並在用戶單擊「停止」時爲其分配計算的持續時間。這本身應該是一個提交按鈕。

所以你的Javascript會是這樣的：

<script type="text/javascript"> 
var duration = 0; 
...YOUR TIME CALCULATION CODE... 

function assignDuration() 
{ 
    document.stopform.duration.value = duration; 
} 

</script> 

而且你的HTML也將有：

<form name="stopform" action="process-stop.php" method="POST"> 
    <input type="hidden" name="duration" value="0"/> 
    <input type="submit" name="dostop" onClick="assignDuration()" value="Stop"/> 
</form> 

您還需要處理該時間值的PHP文件：

$duration = $_POST['duration']; 
mysql_query('INSERT INTO MyTable (duration, technician) VALUES ('.$duration.', '.$technicianId.')'); 

上面的代碼假定你已經有了識別用戶的方法。

爲了記錄，我同意先前有關在服務器上記錄開始時間和結束時間的評論，然後計算那裏的持續時間。如前所述，在客戶端執行它的問題是，用戶可以通過操縱JavaScript代碼甚至只是系統時間和日期來更改數據。另外，如果JavaScript沒有啓用，那麼定時器的功能根本不起作用。

如果您肯定JavaScript將始終啓用並且用戶不會操作它，那麼上述解決方案（或其他非常類似的解決方案）應該可以工作。

P.S.您可能需要仔細檢查JavaScript和PHP的語法，因爲我只是將它從頭頂輸入，並沒有在代碼編輯器中看到它。