0
각 사용자에게 작업이 할당되고 일정 기간 내에 작업을 완료해야하는 사이트를 구축 중입니다. 각 작업에 소요 된 시간을 추적해야합니다. 또한 사용자가 사이트에서 유휴 상태인지 여부를 추적해야합니다.작업에 소요 된 총 시간을 추적하십시오.
오른쪽 지금은이 코드를 사용하여이 작업을 수행 할 수 있습니다
HTML을
<a class="btn btn-success btn-lg" id="startTracking" role="button">Start Tracking</a>
<a class="btn btn-danger btn-lg" id="endTracking" role="button">Stop Tracking</a>
<h2 id="testingSince"></h2>
자바 스크립트가
<script type="text/JavaScript">
var totalSeconds = 0;
var idleSeconds = 0;
$(document).ready(function() {
$('body').on('click','#startTracking',function(){
//Increment the idle time counter every minute.
var idleInterval = setInterval(timerIncrement, 1000); // 1 second
});
//Zero the idle timer on mouse movement.
$(this).mousemove(function (e) {
idleSeconds = 0;
});
$(this).keypress(function (e) {
idleSeconds = 0;
});
});
function timerIncrement() {
totalSeconds += 1;
idleSeconds += 1 ;
if (idleSeconds > 600) { // 20 minutes
alert('You have been sitting Idle for 10 Minutes');
}
$('#testingSince').text(timeStringfromSeconds(totalSeconds));
}
function timeStringfromSeconds(totalSeconds){
var hours = Math.floor(totalSeconds/36e2),
mins = Math.floor((totalSeconds % 36e2)/60),
secs = Math.floor((totalSeconds % 60));
return ("0" + hours).slice(-2)+':'+("0" + mins).slice(-2)+':'+("0" + secs).slice(-2);
}
</script>
그래서이 코드는 잘 작동하고 사용자가 시간을 볼 수 있습니다 그가 버튼을 클릭 한 이후로 보냈다. 또한 사용자 유휴 시간을 추적하고 10 분 후에 경보를 보냅니다.
그러나 여기에 유일한 문제는 페이지가 다시로드 할 때 카운터가 2 개 라인 즉 0에서 시작한다는 것입니다 :
var totalSeconds = 0;
var idleSeconds = 0;
난 그냥 다시 시작하고 이전 값에서 계속되지 타이머 카운터를 원한다.
이렇게하는 한 가지 방법은 쿠키를 사용하는 것입니다. 그래서 나는 매초 그들을 업데이 트해야하지만 이것이 좋은 아이디어인지 확실하지 않습니다.
다른 방법이 있거나 브라우저 쿠키를 사용해야하는 경우 알려주십시오.