利用js实现在浏览器状态栏显示访问者在本页停留的时间

问题描述：在状态栏上显示 ，访问者在本页停留的 时间 （如：您在本页停留了 （如：您在本页停留了 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>

运行效果如图所示。

赞 (0)

相关推荐

  • JS实现来回出现文字的状态栏特效代码

    JS实现来回出现文字的状态栏特效代码

    本文实例讲述了JS实现来回出现文字的状态栏特效代码.分享给大家供大家参考,具体如下: 运行这款来回出现文字的状态栏特效时,请注意页面左下角的状态栏.貌似IE8以上版本看不到效果唉.那么究竟是如何实现的呢?主要是用函数来显示消息,根据place的值取当前需显示的字符串,准备在300毫秒后收起显示,将需取的字符串长度计数器加一准备下一次显示:同时使用函数隐藏消息,取Message右边的一定长度的字符串,设定消隐下一个字符的延时. 运行效果截图如下: 在线演示地址如下: http://demo.jb5

  • JS实现浏览器状态栏文字闪烁效果的方法

    JS实现浏览器状态栏文字闪烁效果的方法

    本文实例讲述了JS实现浏览器状态栏文字闪烁效果的方法.分享给大家供大家参考,具体如下: 这里演示为你的IE浏览器状态栏增加文字闪烁效果,请看下面的状态栏中的文字一直不停的闪烁,火狐下可能效果不正常,本代码只针对IE浏览器. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-txt-blink-codes/ 具体代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Tra

  • JS实现浏览器状态栏显示时间的方法

    JS实现浏览器状态栏显示时间的方法

    本文实例讲述了JS实现浏览器状态栏显示时间的方法.分享给大家供大家参考,具体如下: 以前做个人主页的时候,总喜欢把自己的网页搞的很个性,在网上做跑马灯文字,在状态栏显示问候语,或者在状态栏添加时间显示,本代码就是实现了状态栏显示当前时间的物资,火狐没测度,IE下效果完美. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-time-demo/ 具体代码如下: <!DOCTYPE HTML PUBLIC "

  • JS实现浏览器状态栏文字从右向左弹出效果代码

    JS实现浏览器状态栏文字从右向左弹出效果代码

    本文实例讲述了JS实现浏览器状态栏文字从右向左弹出效果.分享给大家供大家参考,具体如下: 这里状态栏文字弹出代码,从右向左弹出,通过修改Script中的这些代码片段可改变效果: var POSITION = 100 var DELAY = 4 var MESSAGE = "这里是你想要的文字!" 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-txt-scroll-codes/ 具体代码如下: <!DO

  • 改变状态栏文字的js代码

    复制代码 代码如下: <!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=&qu

  • JS实现在状态栏显示打字效果完整实例

    JS实现在状态栏显示打字效果完整实例

    本文实例讲述了JS实现在状态栏显示打字效果.分享给大家供大家参考,具体如下: 这里演示JS实现带有打字特效的状态栏,在状态栏显示打字效果的文字,注意,此效果存在浏览器兼容性问题,在IE7或更高的浏览器下貌似不显示效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-status-bar-show-txt-print-demo/ 具体代码如下: <html> <head> <script language="J

  • JS实现IE状态栏文字缩放效果代码

    JS实现IE状态栏文字缩放效果代码

    本文实例讲述了JS实现IE状态栏文字缩放效果代码.分享给大家供大家参考,具体如下: 这里演示状态栏文字缩放变化效果,同样基于JavaScript技术,虽然很不起眼的小特效,不过对学习JS来说,还是很有用的.本效果直接运行可能看不到效果,你可以复制代码保存成一个HTML文件,双击后运行可看到效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ie-ztl-txt-style-demo/ 具体代码如下: <HTML> <HEAD&g

  • JS实现状态栏跑马灯文字效果代码

    JS实现状态栏跑马灯文字效果代码

    本文实例讲述了JS实现状态栏跑马灯文字效果代码.分享给大家供大家参考,具体如下: 这款状态栏跑马灯,文字跑动的定义在数组内,自己可修改内容.现在的IE8貌似不兼容,有缺憾的代码,欢迎JS爱好者修正,修正请发回一份.状态栏为效果显示区. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ztlpmd-txt-style-codes/ 具体代码如下: <HTML> <HEAD> <TITLE>间隔状态栏跑马灯</T

  • 利用js实现在浏览器状态栏显示访问者在本页停留的时间

    利用js实现在浏览器状态栏显示访问者在本页停留的时间

    问题描述:在状态栏上显示 ,访问者在本页停留的 时间 (如:您在本页停留了 (如:您在本页停留了 X小时 X分 X秒) 该问题相当于是设计一个计时器,用于显示浏览者在该页面停留了多长时间.要解决该问题,我想到的主要有两种方法. 方法一:利用系统时间.即先设置一个变量,用于获取登录开始时间startTime,然后利用setTimeout()函数让页面不停的刷新,在刷新的同时,获取当前时间nowTime,然后用当前时间减去登录开始时间,即为停留时间.在此就不做详细编写.重点说下下面使用到的方法二来进

  • 利用JS hash制作单页Web应用的方法详解

    前言 本文主要给大家介绍了关于利用JS hash制作单页Web应用的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 一.何为hash 这里要讲的hash(也叫哈希),指的是JS中location对象的hash属性,它返回的是URL中#后所跟的零个或多个字符.通常,我们可以通过location.hash的方式获取哈希值或设置哈希值.当然,我们也可以通过设置a标签的href属性来设置哈希值,当用户点击该a标签时即可改变页面的哈希值. 例如: /** JS方式 **/ lo

  • 国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程

    目录 1. 页面布局 2. 图片上传和展示 3. 初始化画布 4. 切换模板 5. 输出图片 这里用到的技术: HTML+ CSS+ JavaScript: download.js库: fabric.js库: 先上体验链接:g.cuggz.com/.​ 注:可以点击上方的连接进行使用,不过我的域名被TX屏蔽了,还在申诉中,所以无法在QQ.微信中打开,需要复制链接到浏览器进行查看.使用.​ 下面是这个小工具的截图: 1. 页面布局 这部分不多说,直接上代码: <div class="wrap

  • 如何实现移动端浏览器不显示 pc 端的广告

    前一段时间写了一篇博文, 关于微信内置浏览器不显示联盟广告 根据 window.navigator.userAgent 来判断当前浏览器是否是微信内置浏览器 window.navigator.userAgent=='micromessenger' 今天要分享的内容差不多,因为之前只考虑了微信浏览器的适配,回头在移动端浏览器打开站点,发现适配问题. 有的联盟会自动屏蔽移动端,但是有的联盟就不能屏蔽,所以只能手动去判断. 根据浏览器 userAgent 判断来源 安卓设备的的 userAgent 判

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

  • js实现带关闭按钮始终显示在网页最底部工具条的方法

    本文实例讲述了js实现带关闭按钮始终显示在网页最底部工具条的方法.分享给大家供大家参考.具体如下: 这是一款很实用的代码,给网页加入一个始终显示在浏览器窗口底部的工具栏,可以在上面放上公告,联系人等等信息,此代码的工具条还带有关闭按钮,可以随时关闭 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml

随机推荐