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


Posted in Javascript onDecember 29, 2013

问题描述:在状态栏上显示 ,访问者在本页停留的 时间 (如:您在本页停留了 (如:您在本页停留了 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>

运行效果如图所示。
利用js实现在浏览器状态栏显示访问者在本页停留的时间
Javascript 相关文章推荐
JavaScript 注册事件代码
Jan 27 Javascript
js图片自动切换效果处理代码
May 07 Javascript
Visual Studio中js调试的方法图解
Jun 30 Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
jquery实现搜索框常见效果的方法
Jan 22 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
AngularJS下$http服务Post方法传递json参数的实例
Mar 29 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
JS实现音乐钢琴特效
Jan 06 Javascript
JavaScript装饰者模式原理与用法实例详解
Mar 09 Javascript
vue 遮罩层阻止默认滚动事件操作
Jul 28 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 #Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 #Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 #Javascript
javascript中不等于的代码是什么怎么写
Dec 29 #Javascript
jquery中的on方法使用介绍
Dec 29 #Javascript
从js向Action传中文参数出现乱码问题的解决方法
Dec 29 #Javascript
js data日期初始化的5种方法
Dec 29 #Javascript
You might like
WordPress用户登录框密码的隐藏与部分显示技巧
2015/12/31 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
jquery foreach使用示例
2013/09/12 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
html的DOM中Event对象onblur事件用法实例
2015/01/21 Javascript
javascript中Function类型详解
2015/04/28 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
VueCli3.0中集成MockApi的方法示例
2019/07/05 Javascript
Js Snowflake(雪花算法)生成随机ID的实现方法
2020/08/26 Javascript
vuex的数据渲染与修改浅析
2020/11/26 Vue.js
Bootstrap FileInput实现图片上传功能
2021/01/28 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
python3实现名片管理系统
2020/11/29 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
客服专员岗位职责范本
2013/11/29 职场文书
会计电算化学生个人的自我评价
2014/02/08 职场文书
电气工程自动化求职信
2014/03/14 职场文书
终止合同协议书
2014/04/17 职场文书
环保建议书100字
2014/05/14 职场文书
农业开发项目建议书
2014/05/16 职场文书
战友聚会策划方案
2014/06/13 职场文书
计算机多媒体专业自荐信
2014/07/04 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
2015年爱国卫生工作总结
2015/04/22 职场文书
思想工作总结范文
2015/08/12 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python