利用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引用对象的方法代码
Aug 13 Javascript
javascript实现的简单的表单验证
Jul 10 Javascript
js实现图片放大和拖拽特效代码分享
Sep 05 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
Dec 18 Javascript
JS实现“隐藏与显示”功能(多种方法)
Nov 24 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
jQuery实现jQuery-form.js实现异步上传文件
Apr 28 jQuery
基于angular实现模拟微信小程序swiper组件
Jun 11 Javascript
vue+express 构建后台管理系统的示例代码
Jul 19 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
Jun 24 Javascript
浅谈layui里的上传控件问题
Sep 26 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 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
关于IIS php调用com组件的权限问题
2012/01/11 PHP
取得单条网站评论以数组形式进行输出
2014/07/28 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jQuery实现可拖动的浮动层完整代码
2013/05/27 Javascript
表单元素与非表单元素刷新区别详细解析
2013/11/06 Javascript
扩展IE中一些不兼容的方法如contains、startWith等等
2014/01/09 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
2014/02/10 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
js实现仿百度瀑布流的方法
2015/02/05 Javascript
JavaScript实现页面跳转的方式汇总
2016/05/16 Javascript
json的使用小结
2016/06/08 Javascript
jQueryUI Datepicker组件设置日期高亮
2016/10/13 Javascript
详解如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
2017/06/01 jQuery
详解Angular的8个主要构造块
2017/06/20 Javascript
js中apply与call简单用法详解
2017/11/06 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
Vue3 源码导读(推荐)
2019/10/14 Javascript
JavaScript写个贪吃蛇小游戏(超详细)
2020/03/17 Javascript
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
Python进阶之递归函数的用法及其示例
2018/01/31 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
英国屋顶用品和材料超市:Roofing Supplies UK
2019/08/24 全球购物
意大利奢侈品综合电商网站:MODES
2019/12/14 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
旷课检讨书1000字
2014/02/14 职场文书
数字化校园建设方案
2014/05/03 职场文书
大学生学习计划书
2014/09/15 职场文书
通知的写法
2015/04/23 职场文书
2015年酒店服务员工作总结
2015/05/18 职场文书
python实现简易名片管理系统
2021/04/11 Python
python实现局部图像放大
2021/11/17 Python
redis sentinel监控高可用集群实现的配置步骤
2022/04/01 Redis