2020-04-235 分钟读完 (大约 749 个字) 0次访问

自制极简网页计数器

因为懒，不想写过说明，直接从 github 上 copy 过来了，将就着看吧，因为是使用的 Dom 监听事件，所以，是不支持 Pjax 了，再然后，有一点小小的失误，里面用了箭头函数，也就是低版本的浏览器兼容性没做，改天有空再修改一下吧。

关于后台程序，有空会整理出来，最后，我只是一个小菜鸟，写的并不好。

counter_js

使用 Lumen 作为后端开发的简易网页计数器，用于支持 Hexo 博客的 uv、pv统计。

浏览器支持


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

快速使用

在 head 中添加 script 标签：

<script src="https://cdn.sevth.com/website/counter_js/counter.min.js"></script>

数据说明

返回数据

引入 script 后，将返回四个数据：

callback({
site_pv:12		//站点总访问量
site_uv:4			//站点访问人次
page_pv:6			//当前页面访问量
version:1.0		//版本号
})

其中 site_pv 将自动填入页面中 id 为 counter-site-pv 的容器中，site_uv 将自动填入页面中 id 为 counter-site-uv 的容器中，page_pv 将自动填入页面中 id 为 counter-page_pv 的容器中。 version 暂时没有其他作用。

配置

<script>
    window.counter_config = {
    	strict: true		//启用严格uv统计模式
    }
</script>

这个开关的作用就是在统计 uv 时更严格。统计的原理是首次访问时将写入一个检测 cookie ，未开启时，每过24h，旧用户将按照新用户计入 uv ，也就是cookie将在24h后删除，再次访问就相当于一个新用户了，开启严格模式后，用户在24h内访问一次，将刷新cookie 时间。按访问自然人统计。

注意：该配置默认是关闭的

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    window.counter_config = {
    	strict: true
    }
    </script>
    <script src="https://cdn.sevth.com/website/counter_js/counter.min.js"></script>
</head>
<body>
<div>
总人数：<span id="counter-site-uv">99+</span>
<br>
此页面访问量：<span id="counter-page-pv">99+</span>
<br>
本站总访问量：<span id="counter-site-pv">99+</span>
</div>
</body>
</html>

webpack 打包

克隆仓库

git clone https://github.com/sevth-developer/counter_js.git

进入目录并安装依赖
1
cd ./counter_js && npm install
打包文件
1
npm run build
打包完成后会在 dist 目录生成打包好的文件。

计划

~~访问热度页面统计接口~~

因为页面 url 经过base64编码后，字符长度超了，所以改用sha1 那么，就没办法做统计了。

警告

为推进互联网从 http 过渡到 https ，默认提供的加载地址仅支持 https 方式访问，如果有特殊需要，请自行下载文件引入。

支持

本文标题：自制极简网页计数器
本文作者：sevth
本文链接：https://sevth.com/develop/javascript/自制极简网页计数器.html
发布日期：2020-04-23
最后更新：2020-05-04
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！