【JavaScript】获取页面停留时间并提交 - 枫芸志
- -花了点时间研究了下JavaScript获取页面停留时间并提交的方法，小结一下. 页面停留时间为什么为0》中介绍Google Analytic的算法是：当发现一个访问者进入一个网站访问了第一个页面时，会记录下他的访问时间. 等到他访问第二个页面时，记录下第二个时间，用第二个时间和第一个时间的差值作为这个访问者在第一个页面的停留时间.
【JavaScript】获取页面停留时间并提交 - 枫芸志
标签：
| 发表时间：2018-01-20 09:47 | 作者：
出处：http://witmax.cn
花了点时间研究了下JavaScript获取页面停留时间并提交的方法，小结一下。
《 页面停留时间为什么为0》中介绍Google Analytic的算法是：当发现一个访问者进入一个网站访问了第一个页面时，会记录下他的访问时间。等到他访问第二个页面时，记录下第二个时间，用第二个时间和第一个时间的差值作为这个访问者在第一个页面的停留时间。 以此类推，每个页面的停留时间就是用户访问下个页面时的时间减去他访问这个页面时的时间，并加入到这个页面总的停留时间中。 这个方法在诸多统计方法里，是最简单的，也比较合理，并且计算量最小。 但有个问题，就是用户访问的最后一个页面， 它没有下一个页面，那么怎么计算它的停留时间呢？ 用户访问的最后一个页面的停留时间被认为是0。
下面是自己google一番后找到的两种实现方法。原理相同，皆是在页面加载后JS记录一个开始时间，在离开页面时（跳转到别的页面或是页面刷新，不包括页面关闭）记录结束时间，减一下就是页面停留时间，利用最简单的异步提交方式提交数据。
方法一代码如下：1.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript获取页面停留时间并提交-1</title>
<script language=JavaScript>
var start = new Date();;
var end;
window.onbeforeunload = function(){
end = new Date();
var len = (end.getTime() - start.getTime()) / 1000;
var img = new Image();
img.src = "log.php?visitlength=" + len + "&visitpage=1.html";
}
</script>
</head>
<body>
<h2>JavaScript获取页面停留时间并提交-1</h2>
<a href="1.html">JavaScript获取页面停留时间并提交-1</a><br /><br />
<a href="2.html">JavaScript获取页面停留时间并提交-2</a><br /><br />
<a href="http://witmax.cn">晴枫</a>
</body>
</html> 方法二代码如下：2.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript获取页面停留时间并提交-2</title>
<script language=JavaScript>
var start;
var end;
function load() {
start=new Date();
}
function unload() {
end=new Date();
var len = (end.getTime() - start.getTime()) / 1000;
var img = new Image();
img.src = "log.php?visitlength=" + len + "&visitpage=2.html";
}
</script>
</head>
<body onload="load()" onunload="unload()">
<h2>JavaScript获取页面停留时间并提交-2</h2>
<a href="1.html">JavaScript获取页面停留时间并提交-1</a><br /><br />
<a href="2.html">JavaScript获取页面停留时间并提交-2</a><br /><br />
<a href="http://witmax.cn">晴枫</a>制作
</body>
</html> 服务器端采用PHP记录提交的数据，代码如下：log.php
<?php
$visittime = date("Y-m-d H:i:s");
$visitlength = $_GET['visitlength'];
$visitpage = $_GET['visitpage'];
$log = file_get_contents("log.txt");
file_put_contents("log.txt", $log."\n".$visittime ." " .$visitlength ." " .$visitpage );
?> 以上两种方法效果相同，缺陷也是一样，就是通过关闭标签页的方式关闭页面不会提交数据，暂未找到更好的解决方案。
打包了下源码，需要的点击 JS获取页面停留时间并提交的源码下载
标签： Javascript
相关 [javascript 页面 时间] 推荐：
Javascript高性能动画与页面渲染
- - 极客521 | 极客521如果你不得不使用setTimeout或者setInterval来实现动画，那么原因只能是你需要精确的控制动画. 但我认为至少在现在这个时间点，高级浏览器、甚至手机浏览器的普及程度足够让你有理由有条件在实现动画时使用更高效的方式. 页面是每一帧变化都是系统绘制出来的(GPU或者CPU). 但这种绘制又和PC游戏的绘制不同，它的最高绘制频率受限于显示器的刷新频率(而非显卡)，所以大多数情况下最高的绘制频率只能是每秒60帧(frame per second，以下用fps简称)，对应于显示器的60Hz.
巧用 Img / JavaScript 采集页面数据-云栖社区
- -我们发送重要邮件时为了确认对方已读，都会在邮件中设置一个“读取回执"标签以确定对方时候读信. 推广网页时，多少用户做了点击. 移动App运营活动页面，分析用户访问情况. 对这类个性化的采集与统计，针对站长CNZZ、百度统计，移动的Talking Data、友盟等都无法胜任. 个性化需求难满足：用户产生行为并非移动端场景，其中会包括一些运营个性化需求字段，例如：来源、渠道、环境、行为等参数.
7 个漂亮的JavaScript时间轴组件推荐
- chengdujin - ITeye资讯频道时间轴是一个按时间顺序描述一系列事件的很好方式，经常用在项目规划中. 时间轴的典型方案通常设计成一个包含许多长条的带有数据标签的图形，当事件发生的时候则在这些长条的上方进行标记. 本文介绍 7 个漂亮的时间轴组件，它们使用JavaScript和CSS开发. 使用这个小工具，你可以创造出漂亮的交互式时间轴，就像下面这个.
使用原生 JavaScript 在页面加载完成后处理多个函数
- - 我爱水煮鱼网页中的 JavaScript 脚本运行是需要通过事件去触发的. 一般的做法就是在网页中，直接编写几个函数，有的在代码被加载的时候就被浏览器处理，或者使用类似下面的代码来触发实现函数的相关功能. 上面代码的意思就是，当鼠标点击 id 为 link 的元素的时候，就触发了它的 onclick 事件，然后执行使用 JavaScript 定义的 fun 函数.
javascript 获取滚动条高度+常用js页面宽度与高度
- - Web前端 - ITeye博客javascript 获取滚动条高度+常用js页面宽度与高度
/ ********************
* 取窗口滚动条高度
****************** /
function getScrollTop()
{. return scrollTop;
}
/ ********************
* 取窗口可视范围的高度
******************* /
function getClientHeight()
{.
用JavaScript探测页面上的广告是否被AdBlock屏蔽了的方法
- - Web骇客看电视、看电影、看优酷、看网页时，对满天飞的广告也是深恶痛绝. 但是，对一个中小网站站长/博客主来说，广告几乎是唯一的能成支持网站/博客正常运转的资金来源. 如果一个博客主，只是无私发布稿件，能坚持几年的，很少. 火狐浏览器和谷歌浏览器里都有能够屏蔽页面给广告的插件，最有名的是AdBlock和AdBlock Plus.
[原创]两行代码解决javascript按指定格式显示日期时间
- We_Get - 博客园-首页原创精华区/// 待显示的日期时间，例如new Date(). /// 需要显示的格式，例如yyyy-MM-dd hh:mm:ss. 我曾为解决该问题花了不少时间，主要是网络上找到的代码要么非常烦琐，要么不能通用或格式只能固定几个，所以我专门对这个问题进行了研究，最终优化到只有2行代码，非常精简.
精心挑选12款优秀的 JavaScript 日历和时间选择插件
- - 博客园_梦想天空 今天这篇文章向大家分享12款精心挑选的优秀. JavaScript 日历和时间选择插件，都带有详细的使用教程和效果演示. Web 开发人员更快速的实现各种精美的日历和时间选择效果. 同时推荐阅读的博文中还有更多实现各种网站功能的. jQuery 优秀插件，欢迎大家可以去淘金. 精心挑选的优秀jQuery Ajax分页插件和教程.
BrowserSwarm：开发者兼容测试利器，节省JavaScript项目的测试时间
- - IE浏览器中文网站今天，我们联合 appendTo 和 Sauce Labs 共同发布了 BrowserSwarm – 这是一个开源工具，可以帮助 Web 开发人员跨设备和浏览器自动测试其 JavaScript 框架和库. 质量框架是现代 Web 的基础，但框架开发人员通常没有合适的资源来执行跨浏览器测试. BrowserSwarm 可以帮助开发人员构建可互操作的优秀框架.