利用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 Math对象
Aug 13 Javascript
js 蒙版进度条(结合图片)
Mar 10 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
jquery简单实现图片切换效果的方法
May 12 Javascript
Jquery数字上下滚动动态切换插件
Aug 08 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
概述如何实现一个简单的浏览器端js模块加载器
Dec 07 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
原生JS实现弹幕效果的简单操作指南
Nov 10 Javascript
Javascript使用integrity属性进行安全验证
Nov 07 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
解决ajax+php中文乱码的方法详解
2013/06/09 PHP
PHP 序列化和反序列化函数实例详解
2020/07/18 PHP
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
2007/08/08 Javascript
JavaScript 解析读取XML文档 实例代码
2009/07/07 Javascript
javascript中&quot;/&quot;运算符常见错误
2010/10/13 Javascript
很棒的学习jQuery的12个网站推荐
2011/04/28 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
JSONP 跨域共享信息
2012/08/16 Javascript
漂亮的jquery提示效果(仿腾讯弹出层)
2013/02/05 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
JS复制到剪贴板示例代码
2013/10/30 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
Winform客户端向web地址传参接收参数的方法
2016/05/17 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
AngularJS通过$sce输出html的方法
2016/09/22 Javascript
利用yarn实现一个webpack+react种子
2016/10/25 Javascript
js实时获取窗口大小变化的实例代码
2016/11/18 Javascript
vue实现添加标签demo示例代码
2017/01/21 Javascript
vue2.0中goods选购栏滚动算法的实现代码
2017/05/17 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
详解Vue实战指南之依赖注入(provide/inject)
2018/11/13 Javascript
使用vue-router切换页面时实现设置过渡动画
2019/10/31 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
浅谈PYTHON 关于文件的操作
2019/03/19 Python
Python使用pyserial进行串口通信的实例
2019/07/02 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
2020/08/17 HTML / CSS
任长霞观后感
2015/06/16 职场文书
Angular CLI发布路径的配置项浅析
2021/03/29 Javascript
Vue3.0写自定义指令的简单步骤记录
2021/06/27 Vue.js
python flappy bird小游戏分步实现流程
2022/02/15 Python