利用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 解析后的xml对象的读取方法细解
Jul 25 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
文字垂直滚动之javascript代码
Jul 29 Javascript
AngularJS  ng-table插件设置排序
Sep 21 Javascript
关于Vue.js一些问题和思考学习笔记(1)
Dec 02 Javascript
原生js实现中奖信息无间隙滚动效果
Jan 18 Javascript
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
浅谈js闭包理解
Mar 28 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
Apr 14 Javascript
JS的深浅复制详细
Oct 16 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
一棵php的类树(支持无限分类)
2006/10/09 PHP
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
第二节--PHP5 的对象模型
2006/11/16 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
最常用的8款PHP调试工具
2014/07/06 PHP
ThinkPHP控制器详解
2015/07/27 PHP
DOM 脚本编程中的兄弟节点
2009/10/31 Javascript
jQuery.Autocomplete实现自动完成功能(详解)
2010/07/13 Javascript
24款非常有用的 jQuery 插件分享
2011/04/06 Javascript
基于jquery的拖动布局插件
2011/11/25 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
Backbone.js 0.9.2 源码注释中文翻译版
2015/06/25 Javascript
用NODE.JS中的流编写工具是要注意的事项
2016/03/01 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
jquery实现动态添加附件功能
2018/10/23 jQuery
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
探究python中open函数的使用
2016/03/01 Python
Python设计模式中单例模式的实现及在Tornado中的应用
2016/03/02 Python
python正则表达式去除两个特殊字符间的内容方法
2018/12/24 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
基于tf.shape(tensor)和tensor.shape()的区别说明
2020/06/30 Python
python MD5加密的示例
2020/10/19 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
主持人演讲稿范文
2013/12/28 职场文书
致400米运动员广播稿
2014/02/07 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
结婚喜宴迎宾词
2015/08/10 职场文书
创业计划书之少年玩具店
2019/09/05 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
浅谈MySQL之select优化方案
2021/08/07 MySQL