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

渲染效果主要看你在 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>
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇