Js implementation in the browser status bar to show how long visitors stay on this page

  • 2020-03-30 01:09:01
  • OfStack

Problem description: in the status bar, it shows how long the visitor stays on this page (e.g., you stay on this page (e.g., you stay on this page for X hours X minutes X seconds).

The question is akin to designing a timer to show how long a visitor has been on the page. There are two main ways I can think of to solve this problem.

Method 1: use system time. That is, first set a variable to get the startTime of login startTime, and then use setTimeout() function to make the page constantly refresh, while refreshing, get the current time nowTime, and then use the current time minus the startTime of login, that is, the stay time. Do not write in detail here. Focus on the following method used to implement two.

Method 2: set three variables: second,minute,hour. Then make second continuously +1, and use setTimeout to realize the page refresh every second, when second is greater than or equal to 60, minute starts +1, and make second reset to zero. Likewise, when minute is greater than or equal to 60, the hour starts with +1. This can achieve the timing function.

Method 2 code is as follows:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> Headless document </title> 
</head> 
<body onload="timeCount()"> 
<script type="text/javascript"> 
var second=0; 
var minute=0; 
var hour=0; 
function timeCount(){ 
second=second+1; 
setTimeout("timeCount()",1000); 
while(second>=60){ 
minute=minute+1; 
second=0; 
while(minute>=60){ 
hour=hour+1; 
minute=0; 
second=0; 
} 
} 
window.status=" You're staying on this page "+hour+" hours "+minute+" points "+second+" seconds "; 
} 
</script> 
</body> 
</html> 

The running effect is shown in the figure.
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201312/201312291706021.gif? 2013112917632 ">


Related articles: