利用js实现在浏览器状态栏显示访问者在本页停留的时间

 本文为大家介绍下利用JavaScript实现在浏览器状态栏显示停留时间即在状态栏上显示访问者在本页停留的时间

问题描述:在状态栏上显示 ,访问者在本页停留的 时间 (如:您在本页停留了 (如:您在本页停留了 X小时 X分 X秒) 
 
该问题相当于是设计一个计时器,用于显示浏览者在该页面停留了多长时间。要解决该问题,我想到的主要有两种方法。 
 
方法一:利用系统时间。即先设置一个变量,用于获取登录开始时间startTime,然后利用setTimeout()函数让页面不停的刷新,在刷新的同时,获取当前时间nowTime,然后用当前时间减去登录开始时间,即为停留时间。在此就不做详细编写。重点说下下面使用到的方法二来进行实现。 
 
方法二:设置三个变量:second,minute,hour。然后让second不停的+1,并且利用setTimeout实现页面每隔一秒刷新一次,当second大于等于60时,minute开始+1,并且让second重新置零。同理当minute大于等于60时,hour开始+1。这样即可实现计时功能。 
 
方法二代码如下: 
 
 代码如下:
<!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>无标题文档</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="你在本网页停留了"+hour+"小时"+minute+"分"+second+"秒"; 

</script> 
</body> 
</html> 
 

时间: 2024-09-17 17:38:48

利用js实现在浏览器状态栏显示访问者在本页停留的时间的相关文章

JS实现浏览器状态栏显示时间的方法_javascript技巧

本文实例讲述了JS实现浏览器状态栏显示时间的方法.分享给大家供大家参考,具体如下: 以前做个人主页的时候,总喜欢把自己的网页搞的很个性,在网上做跑马灯文字,在状态栏显示问候语,或者在状态栏添加时间显示,本代码就是实现了状态栏显示当前时间的物资,火狐没测度,IE下效果完美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-time-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "

javascript-IE8 Iframe 使用js 设置frameBorder 浏览器中显示,但是没有效果

问题描述 IE8 Iframe 使用js 设置frameBorder 浏览器中显示,但是没有效果 需要动态创建 iframe 但是 动态创建 设置iframe.setAttribute("frameBorder", 0); 或者 iframe.frameBorder=0;他们都将属性 设置到了 IE8 浏览器中,F12开发工具,也可以看到该属性,但是就是没有效果,而采用 <iframe frameBorder=0 .....> 直接这样设置,就可以生效,js 就不行,求解决

js 兼容多浏览器的显示隐藏层

js 兼容多浏览器的显示隐藏层 <html xmlns="http://www.111cn.net/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>js 兼容多浏览器的显示隐藏层</title> <script language=&qu

JS实现在状态栏显示打字效果完整实例_javascript技巧

本文实例讲述了JS实现在状态栏显示打字效果.分享给大家供大家参考,具体如下: 这里演示JS实现带有打字特效的状态栏,在状态栏显示打字效果的文字,注意,此效果存在浏览器兼容性问题,在IE7或更高的浏览器下貌似不显示效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-txt-print-demo/ 具体代码如下: <html> <head> <script language="J

JS函数为定义问题,浏览器老是显示函数fun2( )未定义

问题描述 JS函数为定义问题,浏览器老是显示函数fun2( )未定义 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>改变图案的形状和颜色</title> <script type="text/javascript"> function fun1(){ document.body.innerHTML = &quo

javascript-jsp引入的js浏览器不显示

问题描述 jsp引入的js浏览器不显示 解决方案 教你个方法吧,打开浏览器的开发者模式(谷歌.火狐.IE都有)访问你要调试的路径. 如果浏览器控制台报404,那你就要检查404的文件是否发布成功或者是url引入是否正确 解决方案二: 重新在项目管理器中添加以下,以保证在发布时文件被包含进去 解决方案三: 如果部署后文件在容器里是存在的,那么就要考虑是否是引入的路径出了问题 解决方案四: 楼上几位说的挺好,基本就是 1.路径问题,检查下是否写错:2.重新部署到服务器 解决方案五:

JS实现浏览器状态栏文字闪烁效果的方法_javascript技巧

本文实例讲述了JS实现浏览器状态栏文字闪烁效果的方法.分享给大家供大家参考,具体如下: 这里演示为你的IE浏览器状态栏增加文字闪烁效果,请看下面的状态栏中的文字一直不停的闪烁,火狐下可能效果不正常,本代码只针对IE浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-txt-blink-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra

利用js ActiveXObject浏览器全屏实现方法

利用js activexobject浏览器全屏实现方法 activexobject对象是启用并返回 automation 对象的引用.使用方法: newobj = new activexobject( servername.typename[, location]) activexobject 对象语法有这些部分:其中newobj是必选项.要赋值为 activexobject 的变量名. servername是必选项.提供该对象的应用程序的名称. typename是必选项.要创建的对象的类型或类

JS实现浏览器状态栏文字从右向左弹出效果代码_javascript技巧

本文实例讲述了JS实现浏览器状态栏文字从右向左弹出效果.分享给大家供大家参考,具体如下: 这里状态栏文字弹出代码,从右向左弹出,通过修改Script中的这些代码片段可改变效果: var POSITION = 100 var DELAY = 4 var MESSAGE = "这里是你想要的文字!" 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-txt-scroll-codes/ 具体代码如下: <!DO