一个 基于 cloudflare workers 和 vue ssr 的网络访问计数器

2021-10-30 13:36:32 +08:00
 lisongeee

自己写的 svg 模板 看看动画效果 ->

渲染效果主要看你在 url.query 传过来的 svg 模板

做这个主要是因为前几天也在 V2EX 看到一个 计数器,我在下面评论 说可以 一步到胃 直接把渲染模板传过来

我看没什么响应,就自己去实现了,起初是想做一个全局替换的,后来仔细研究了一些 svg 效果,全局替换效果辣鸡

于是想到了 vue 的 ssr 渲染函数,把你的渲染模板通过 url.query 传递到后端

我还没测过实际 http path 最大长度是多少,但是 我在 Edge@95 发长度 8000 的 url 请求没问

当然 模板 越小越好,可以提前 html minimize

数据存储是 cloudflare workers kv, 在 workers 里可以很便捷地使用,基本是 workers 的配套了

有什么错误或者需要改进的地方,请各位大佬 指正,谢谢。

https://github.com/lisonge/visit-counter.git

附上 展示的 svg 模板,可再次刷新此界面查看效果,也可以刷到 99 看看 99 到 100 动画效果

<svg
      xmlns="http://www.w3.org/2000/svg"
      :width="13 * (count + 1 + '').length + 5"
      height="16"
    >
      <g>
        <text
          v-for="n in (count + '').length"
          :key="n"
          style="font-size: 13px"
          :x="
            (n - 1) * 13 +
            ((count + '').length < (count + 1 + '').length ? 13 : 0) +
            5
          "
          y="13"
        >
          {{ (count + "")[n - 1] }}
          <animate
            attributeName="y"
            from="13"
            to="-4"
            :begin="((count + '').length - n) * 300 + 400 + 'ms'"
            dur="700ms"
            fill="freeze"
            v-if="(count + '')[n - 1] != (count + 1 + '')[n - 1]"
          />
        </text>
        <text
          v-for="n in (count + 1 + '').length"
          :key="n"
          style="font-size: 13px"
          :x="(n - 1) * 13 + 5"
          y="30"
        >
          {{ (count + 1 + "")[n - 1] }}
          <animate
            attributeName="y"
            from="30"
            to="13"
            :begin="((count + '').length - n) * 300 + 500 + 'ms'"
            dur="700ms"
            fill="freeze"
            v-if="(count + '')[n - 1] != (count + 1 + '')[n - 1]"
          />
        </text>
      </g>
    </svg>
950 次点击
所在节点    分享创造
2 条回复
jwenjian
2021-10-30 17:36:30 +08:00
你说的是这个吗 ? https://v2ex.com/t/681899#reply89 如果是的话,主要因为我很久没来 v 站了 :)
lisongeee
2021-10-30 18:32:11 +08:00
@jwenjian 不是

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/811729

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX