javascript显示用户停留时间的简单实例

2023年5月27日下午4:03 • JavaScript

JavaScript 显示用户停留时间的简单实例

在网页开发中，我们有时需要知道用户在页面上停留的时间。今天我们就来分享一下如何通过 JavaScript 显示用户停留时间的简单实例。

思路：

1.获取当前时间

2.当用户进入页面时开始记录时间

3.当用户离开页面时，计算时间差

4.将时间差显示在页面上

示例1：采用 Date() 对象获取时间

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例1：使用 Date() 对象获取时间</title>
</head>
<body>
    <p>等待一会儿......</p>
    <script type="text/javascript">
        var start = Date.now(); // 获取进入页面的时间
        window.addEventListener('unload', function() {
            var diff = Date.now() - start; // 计算时间差
            document.body.innerHTML = "您在此页面停留了 " + diff / 1000 + " 秒";
        });
    </script>
</body
</html>

示例2：采用 performance.now() 获取时间

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>示例2：使用 performance.now() 获取时间</title>
</head>
<body>
    <p>等待一会儿......</p>
    <script type="text/javascript">
        var start = performance.now(); // 获取进入页面的时间
        window.addEventListener('unload', function() {
            var diff = performance.now() - start; // 计算时间差
            document.body.innerHTML = "您在此页面停留了 " + Math.round(diff) + " 毫秒";
        });
    </script>
</body
</html>

其中，window.addEventListener()函数为事件监听函数。当事件被触发时，函数内的代码将会执行。unload 事件代表用户离开页面时触发。我们可以在该事件函数中，计算进入页面到离开页面的时间差，并将结果在页面上显示出来。

注意，示例中我们使用 Math.round() 函数对计算得到的时间差进行四舍五入处理，避免出现小数点。

对于计算时间差的方法，示例1 中采用的是比较普遍的 Date() 对象。而示例2 中，使用了 performance.now() 函数来获取当前时间，性能要求更高。

以上就是 JavaScript 显示用户停留时间的简单实例，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript显示用户停留时间的简单实例 - Python技术站