利用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 02 Javascript
js调用css属性写法
Sep 21 Javascript
javascript常用方法汇总
Dec 02 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
Sep 17 Javascript
手写Node静态资源服务器的实现方法
Mar 20 Javascript
快速搭建vue2.0+boostrap项目的方法
Apr 09 Javascript
在Vue中获取组件声明时的name属性方法
Sep 12 Javascript
在Create React App中启用Sass和Less的方法示例
Jan 16 Javascript
Vue form表单动态添加组件实战案例
Sep 02 Javascript
jQuery--遍历操作实例小结【后代、同胞及过滤】
May 22 jQuery
Antd中单个DatePicker限定时间输入范围操作
Oct 29 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
Dec 07 Vue.js
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
php打印一个边长为N的实心和空心菱型的方法
2015/03/02 PHP
PHP递归算法的简单实例
2019/02/28 PHP
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
JS Replace()的高级使用方法介绍
2013/06/29 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
JS数组(Array)处理函数整理
2014/12/07 Javascript
利用Node.JS实现邮件发送功能
2016/10/21 Javascript
12 款 JS 代码测试必备工具(翻译)
2016/12/13 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
React Hooks的深入理解与使用
2018/11/12 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
利用JavaScript将Excel转换为JSON示例代码
2019/06/14 Javascript
vue-loader中引入模板预处理器的实现
2019/09/04 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
详解Python中的相对导入和绝对导入
2017/01/06 Python
Python3爬虫使用Fidder实现APP爬取示例
2018/11/27 Python
PyQt4 treewidget 选择改变颜色,并设置可编辑的方法
2019/06/17 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
Python 字节流,字符串,十六进制相互转换实例(binascii,bytes)
2020/05/11 Python
Python 创建守护进程的示例
2020/09/29 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
欧舒丹澳洲版:L’OCCITANE
2017/07/17 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
复古服装:RetroStage
2019/05/10 全球购物
掌上明珠Java程序员面试总结
2016/02/23 面试题
2015年元旦活动总结
2014/05/09 职场文书
应聘会计求职信
2014/06/11 职场文书
2014年党支部工作总结
2014/11/13 职场文书
客房领班岗位职责
2015/02/11 职场文书
党员个人总结范文
2015/02/14 职场文书
2016新年慰问信范文
2015/03/25 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
运动会开幕式主持词
2015/07/01 职场文书
优秀乡村医生事迹材料(2016精选版)
2016/02/29 职场文书