Untitled
unknown
javascript
2 years ago
3.0 kB
3
Indexable
<!doctype html> <html> <head> <title>jQuery Counter</title> <script src="https://www.tutorialspoint.com/jquery/jquery-3.6.0.js"></script> </head> <body> <h1>jQuery Counter </h1> <div id="logs" style="width:100%;"></div> </body> <script> var activeTimeTimer; var resetIntervalTimer; var activeTime = 0; function logActiveTime(){ appendLogs("started .."); if(activeTimeTimer){ clearInterval(activeTimeTimer); } //every second increze activity time by 1 second activeTimeTimer = setInterval(function() { activeTime++; appendLogs("activeTime" + activeTime); },1000); //Reset setting and adding 10 min again resetCounting(); } // Resetting timer if any activity in 10 Min. function resetCounting(){ appendLogs("Timer Reset"); if(resetIntervalTimer){ clearInterval(resetIntervalTimer); } // For testing added 10 second to clear resetIntervalTimer = setInterval(function() { clearActiveTime(); },10000); // Replace by //600000 } // clear all timer if there is no activity in 10 Min. function clearActiveTime(){ if(activeTimeTimer){ clearInterval(activeTimeTimer); } if(resetIntervalTimer){ clearInterval(resetIntervalTimer); } } //Displaying logs in browser. function appendLogs(title){ var innerHtml = ''; innerHtml += '<p>' + title + '</p>'; console.log(title); $('#logs').append(innerHtml); window.scrollTo(0, document.body.scrollHeight); } //Bind Events $(document).bind("mousemove click touchstart mousedown mouseup", function(){ //Resuming couting on activity appendLogs("Click detected.."); logActiveTime(); }); //Bind Event for browser backgound $(window).bind("blur", function() { appendLogs("backgound detected.."); clearActiveTime(); }); //Bind Event for browser forground $(window).bind("focus", function() { appendLogs("forground detected.."); logActiveTime(); }); //Bind Event for browser visitbility change document.addEventListener("visibilitychange", (event) => { if (document.visibilityState == "visible") { appendLogs("visitbility change to active.."); logActiveTime(); } else { appendLogs("visitbility change to inactive.."); clearActiveTime(); } }); //when you switch tab call clearActiveTime (take activeTime here ex : 60) and resetActiveTime (it will set activeTime to zero) Function. // And again start (logActiveTime) on new Tab (for ex : Overview to Location) function resetActiveTime(){ activeTime = 0; } //Start counting on page load logActiveTime(); </script> </html>
Editor is loading...