利用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 相关文章推荐
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
js实现身份证号码验证的简单实例
Feb 19 Javascript
JS实现仿京东淘宝竖排二级导航
Dec 08 Javascript
js兼容火狐获取图片宽和高的方法
May 21 Javascript
JS实现unicode和UTF-8之间的互相转换互转
Jul 05 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
Aug 07 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
Oct 18 Javascript
详解基于React.js和Node.js的SSR实现方案
Mar 21 Javascript
js实现翻牌小游戏
Jul 31 Javascript
js实现鼠标拖曳效果
Dec 30 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php 获取可变函数参数的函数
2009/08/26 PHP
destoon实现首页显示供应、企业、资讯条数的方法
2014/07/15 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
php中file_get_contents()函数用法实例
2019/02/21 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JavaScript通过字典进行字符串翻译转换的方法
2015/03/19 Javascript
JS 对象属性相关(检查属性、枚举属性等)
2015/04/05 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Angular2关于@angular/cli默认端口号配置的问题
2017/07/15 Javascript
解决vue 路由变化页面数据不刷新的问题
2018/03/13 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
微信小程序如何再次获取用户授权的方法
2019/05/10 Javascript
如何使用CSS3和JQuery easing 插件制作绚丽菜单
2019/06/18 jQuery
微信小程序 textarea 层级过高问题简单解决方案
2019/10/14 Javascript
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
Python常见文件操作的函数示例代码
2011/11/15 Python
使用Python编写一个模仿CPU工作的程序
2015/04/16 Python
在Python中操作列表之list.extend()方法的使用
2015/05/20 Python
python脚本实现xls(xlsx)转成csv
2016/04/10 Python
python实现学生管理系统
2018/01/11 Python
Python实现的简单读写csv文件操作示例
2018/07/12 Python
python 同时运行多个程序的实例
2019/01/07 Python
python Tkinter版学生管理系统
2019/02/20 Python
django框架cookie和session用法实例详解
2019/12/10 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
AC Lens:购买隐形眼镜
2017/02/26 全球购物
日语翻译个人求职的自我评价
2013/10/14 职场文书
教师个人自我评价范文
2014/04/13 职场文书
医疗纠纷协议书
2014/04/16 职场文书
生日庆典策划方案
2014/06/02 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
2015年小学师德师风建设工作总结
2015/10/23 职场文书
Redis中有序集合的内部实现方式的详细介绍
2022/03/16 Redis