利用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的caller,callee,call,apply
Apr 28 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
KnockoutJS 3.X API 第四章之click绑定
Oct 10 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
微信小程序实现蓝牙打印
Sep 23 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
原生js实现分页效果
Sep 23 Javascript
javascript实现固定侧边栏
Feb 09 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
JAVA/JSP学习系列之六
2006/10/09 PHP
php相当简单的分页类
2008/10/02 PHP
Zend Studio for Eclipse的java.lang.NullPointerException错误的解决方法
2008/12/06 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
jquery tab标签页的制作
2010/05/10 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
nodejs中转换URL字符串与查询字符串详解
2014/11/26 NodeJs
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
javascript常用的方法整理
2015/08/20 Javascript
javascript 网页进度条简单实例
2017/02/22 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
JavaScript代码调试方法实例小结
2019/01/05 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
node.js中npm包管理工具用法分析
2020/02/14 Javascript
Python实现的数据结构与算法之双端队列详解
2015/04/22 Python
基于python 二维数组及画图的实例详解
2018/04/03 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
手把手教你使用Python创建微信机器人
2019/04/29 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
html5指南-2.如何操作document metadata
2013/01/07 HTML / CSS
Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码
2020/03/17 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
荷兰网上买鞋:MooieSchoenen.nl
2017/09/12 全球购物
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
澳洲小众品牌的集合网站:BNKR
2018/02/23 全球购物
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
定制iPhone和Macbook保护壳:Slick Case
2018/11/21 全球购物
人事主管的岗位职责
2013/11/16 职场文书
医生进修自我鉴定
2014/01/19 职场文书
《路旁的橡树》教学反思
2014/04/07 职场文书
学用政策心得体会
2014/09/10 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2015年法律事务部工作总结
2015/07/27 职场文书