利用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 相关文章推荐
js DOM的学习笔记
Dec 22 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
May 28 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
jQuery基于$.ajax设置移动端click超时处理方法
May 14 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
浅述Javascript的外部对象
Dec 07 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
Aug 31 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
红黑树的插入详解及Javascript实现方法示例
Mar 26 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 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
使用php4加速网络传输
2006/10/09 PHP
开源SNS系统-ThinkSNS
2008/05/18 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
PHP目录操作实例总结
2016/09/27 PHP
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
理解Javascript_08_函数对象
2010/10/15 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
全面理解闭包机制
2016/07/11 Javascript
js判断所有表单项不为空则提交表单的实现方法
2016/09/09 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
jquery实现搜索框功能实例详解
2018/07/23 jQuery
JS实现换肤功能的方法实例详解
2019/01/30 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
Python中作用域的深入讲解
2018/12/10 Python
pyinstaller打包单个exe后无法执行错误的解决方法
2019/06/21 Python
python多进程重复加载的解决方式
2019/12/13 Python
css3实现一款模仿iphone样式的注册表单
2013/03/20 HTML / CSS
基于canvas的骨骼动画的示例代码
2018/06/12 HTML / CSS
详解Html5页面实现下载文件(apk、txt等)的三种方式
2018/10/22 HTML / CSS
西班牙汉普顿小姐:购买帆布鞋和太阳镜
2016/10/23 全球购物
Stutterheim瑞典:瑞典高级外套时装品牌
2019/06/24 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
高二美术教学反思
2014/01/14 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
2014年办公室主任工作总结
2014/11/12 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2014年会计工作总结
2014/11/27 职场文书
2015年十一国庆节演讲稿
2015/03/20 职场文书
2015年前台个人工作总结
2015/04/03 职场文书