使用innerHTML属性创建页面加载计数器

creating a page load counter with innerHTML property

本文关键字：加载 计数器 创建 innerHTML 属性 使用      更新时间：2023-09-26

我正在尝试创建一个网页，统计它被加载的次数。此数字将显示给用户。我正在使用localhost MAMP。这是我正在使用的代码：

<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <h1 id="counter"> 1 </h1>
    <script>
        function increase(){
            var counterElement = document.getElementById("counter");
            var counter = counterElement.textContent;
            counter++;
            counterElement.innerHTML = counter;
        }
        window.onload = increase;
       </script>
</body>
</html>

它只在第一次加载页面时增加计数器变量。在随后的刷新中，is什么也不做。计数器刚好保持2。我做错了什么？我认为innerHTML属性会在页面中插入新的html。在页面刷新期间，该html似乎不会持久存在。有没有更好的替代方法来创建页数？它只会用于个人，所以糟糕的表现不是问题。

这里有一个计数器，它使用本地存储来计算您访问页面的次数：

https://jsfiddle.net/e2q8j1q4/

<div id="counter"></div>
<script>
    var n = localStorage.getItem('on_load_counter');
    if (n === null) {
        n = 0;
    }
    n++;
    localStorage.setItem("on_load_counter", n);
    document.getElementById('counter').innerHTML = n;
</script>

注意：您很可能希望使用一些服务器端脚本/存储来做一个适当的页面点击计数器（对所有用户进行集体计数并永久存储计数）。

遗憾的是，脚本无法更新html页面本身的实际内容。由于您已将计数器设置为1，因此它永远不会高于2。

相关文章：