利用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 相关文章推荐
Yii-自定义删除确认弹框(zyd)jquery实现代码
Mar 04 Javascript
JS测试显示屏分辨率以及屏幕尺寸的方法
Nov 22 Javascript
javascript 实现字符串反转的三种方法
Nov 23 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
jquery 实现两Select 标签项互调示例代码
Sep 25 Javascript
javascript实现仿IE顶部的可关闭警告条
May 05 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
angularjs 表单密码验证自定义指令实现代码
Oct 27 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
JS判断非空至少输入两个字符的简单实现方法
Jun 23 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
Aug 25 Javascript
绘制微信小程序验证码功能的实例代码
Jan 05 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
用Socket发送电子邮件(利用需要验证的SMTP服务器)
2006/10/09 PHP
php 从一个数组中随机的取出若干个不同的数实例
2016/12/31 PHP
PDO::rollBack讲解
2019/01/29 PHP
Ajax+Jpgraph实现的动态折线图功能示例
2019/02/11 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jquery ui dialog ie8出现滚动条的解决方法
2010/12/06 Javascript
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
jQuery根据纬度经度查看地图处理程序
2013/05/08 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
easyui tree带checkbox实现单选的简单实例
2016/11/07 Javascript
Vue filter格式化时间戳时间成标准日期格式的方法
2018/09/16 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
JS实现页面数据懒加载
2020/02/13 Javascript
原生JavaScript之es6中Class的用法分析
2020/02/23 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
linux环境下安装pyramid和新建项目的步骤
2013/11/27 Python
解决python3中自定义wsgi函数,make_server函数报错的问题
2017/11/21 Python
python matplotlib 在指定的两个点之间连线方法
2018/05/25 Python
python实现猜单词小游戏
2020/05/22 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
PyCharm设置每行最大长度限制的方法
2019/01/16 Python
ubuntu 16.04下python版本切换的方法
2019/06/14 Python
python 魔法函数实例及解析
2019/09/25 Python
python GUI库图形界面开发之PyQt5窗口控件QWidget详细使用方法
2020/02/26 Python
pycharm安装及如何导入numpy
2020/04/03 Python
keras 自定义loss损失函数,sample在loss上的加权和metric详解
2020/05/23 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
药剂专业学生求职信范文
2013/12/28 职场文书
经济国贸专业求职信
2014/06/18 职场文书
关于读书的演讲稿600字
2014/08/27 职场文书
社区班子对照检查材料
2014/08/27 职场文书
个人授权委托书范本
2014/09/14 职场文书
Python实现抖音热搜定时爬取功能
2022/03/16 Python