jQuery時間計數

這裏是場景，我有一個時間來計算用戶的time_taken。我想要的是從計時器得到準確的time_taken。例如，用戶參加考試，然後在他/她參加考試後，將提交time_taken（例如1hr 25mins 23secs）。請參閱下面的代碼。

jQuery時間計數

$(document).ready(function(){ 
 
    var d; 
 
    setInterval(function(){ 
 
    d = new Date(); 
 
    dates = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
 
    $('#timeTaken').val(dates); 
 
    }, 1000); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 

 
<input type="text" id="timeTaken" value="">

來源

2017-06-23 Jonjie

我真的不明白這一點使用輸入那裏，你可以只需顯示在一個範圍內，當表單被提交時，需要花費時間並將其與其他數據一起發送。不管怎麼說，這應該爲你工作：

$(document).ready(function() { 
    var time_start = new Date(); 
    setInterval(function() { 
     var time_end  = new Date(); 
     var time_diff = (time_end - time_start); 

     // hours 
     var hours  = Math.floor(time_diff/1000/60/60); 

     // minutes 
     time_diff  = time_diff - hours * 1000 * 60 * 60; 
     var minutes = Math.floor(time_diff/1000/60); 

     // seconds 
     time_diff  = time_diff - minutes * 1000 * 60; 
     var seconds = Math.floor(time_diff/1000); 

     renderTime(hours, minutes, seconds); 
    }, 1000); 
}); 

function renderTime (hrs, min, sec) { 
    var str = convertTime(hrs) + ":" + convertTime(min) + ":" + convertTime(sec); 
    $("#timeTaken").val(str); 
} 

function convertTime (val) { 
    return val < 10 ? "0" + val : val; 
}

這是怎麼回事是我們擁有的time_start不改變，我們有一個被觸發每秒setInterval功能。在那裏我們創建了new Date對象，並從中減去一個靜態對象，它以毫秒爲單位返回時間差。我們做奇怪的Math.floor ing和subtracting，所以我們可以有小時，分鐘和秒作爲一個整數（而不是浮動）。然後我們使用渲染函數來顯示所需元素的時間。

爲什麼我認爲這是一個更好的解決方案，其他人是，如果你想處理用戶的頁面刷新，你只需要將一個變量保存到cookie或其他東西，它將工作，無論頁面刷新。

處理頁面刷新會是什麼樣子（用保存2個小時的cookie）：

function updateTimeCookie() { 
    var time_now = new Date() 
    var value = JSON.stringify(time_now); 
    var expires = time_now.setTime(time_now.getTime() + 7200); 
    $.cookie("timeStart", value, { expires: expires }); 
}; 

// to get Date object from cookie: new Date(JSON.parse($.cookie("timeStart")))

要使用$.cookie()首先必須包括jQuery的餅乾插件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

工作小提琴無餅乾：https://jsfiddle.net/qc3axmf4/1/

工作撥弄着餅乾：https://jsfiddle.net/ta8bnzs0/2/

來源

2017-06-23 06:05:25

不錯！你可以用snippet或jsFiddle書寫它嗎？ – Jonjie

@Jonjie你去吧 –

哇！真棒:) – Jonjie

而不是越來越日期在每一秒，你可以保持在設定的時間間隔，這將在每秒更新計數器。在提交的時候，你可以執行除法和模運算得到的確切時間採取

例

$(document).ready(function(){ 
    var timer =0; 
    setInterval(function(){ 
    Timer +=1; 
    // Code for display in hr mm  and ss 
     $('#timeTaken').val(dates); 
    }, 1000'

}）;

您也可以通過使用moment.js 轉換第二個時間值希望這可以幫助你。快樂編碼

來源

2017-06-23 05:49:45 Pavan

你能提供一些片段？或jsFiddle？ – Jonjie

這裏是搗鼓解決

https://jsfiddle.net/djzsddz6/1/

答解決辦法是下面：

$(document).ready(function(){ 
    var seconds = 0, minutes = 0 , hours = 0; 
    setInterval(function(){ 
    seconds++; 
    if(seconds == 60){ 
     minutes++ 
     seconds = 0; 
    } 

    if(minutes == 60){ 
     hours++ 
     minutes = 0; 
    } 
    console.log(hours, minutes, seconds); 
    $('#timeTaken').val(`${hours}:${minutes}:${seconds}`); 
    }, 1000); 

});

來源

2017-06-23 05:56:53

不錯！這很棒。 – Jonjie

歡迎您！ –

jQuery時間計數

回答

相關問題