利用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 相关文章推荐
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
Aug 15 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
js正则表达式匹配数字字母下划线等
Apr 14 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
JavaScript表单即时验证 验证不成功不能提交
Aug 31 Javascript
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
TypeScript类型声明书写详解
Aug 28 Javascript
jQuery操作事件完整实例分析
Jan 10 jQuery
微信小程序实现拍照和相册选取图片
May 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
mac系统下安装多个php并自由切换的方法详解
2017/04/21 PHP
php类自动装载、链式操作、魔术方法实现代码
2017/07/23 PHP
PHP使用zlib扩展实现GZIP压缩输出的方法详解
2018/04/09 PHP
js操作Xml(向服务器发送Xml,处理服务器返回的Xml)(IE下有效)
2009/01/30 Javascript
window.js 主要包含了页面的一些操作
2009/12/23 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
jquery给图片添加鼠标经过时的边框效果
2013/11/12 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JavaScript中localStorage对象存储方式实例分析
2017/01/12 Javascript
vue.js学习笔记之v-bind和v-on解析
2018/05/03 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
在JavaScript中查找字符串中最长单词的三种方法(推荐)
2021/01/18 Javascript
[15:56]Heroes18_暗影萨满(完美)
2014/10/31 DOTA
go和python调用其它程序并得到程序输出
2014/02/10 Python
跟老齐学Python之深入变量和引用对象
2014/09/24 Python
python matplotlib:plt.scatter() 大小和颜色参数详解
2020/04/14 Python
python datetime处理时间小结
2020/04/16 Python
5款实用的python 工具推荐
2020/10/13 Python
HTML5本地数据库基础操作详解
2016/04/26 HTML / CSS
美国礼品卡交易网站:Cardpool
2018/08/27 全球购物
衰败城市英国官网:Urban Decay英国
2020/04/29 全球购物
高校辅导员推荐信范文
2013/12/25 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
艾滋病宣传标语
2014/06/25 职场文书
我们的节日中秋活动方案
2014/08/19 职场文书
四风剖析查摆对照检查材料思想汇报
2014/09/24 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
行政司机岗位职责
2015/04/10 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers