JS工具合集

好用的工具类 JS 脚本,单文件、零依赖,引入即用

悬浮扫码分享按钮 share.min.js
网页右侧悬浮分享按钮,点击弹出当前页面二维码(自动嵌入 favicon),手机扫码即可访问;可拖拽贴边、自适应明暗主题。
<script src="https://liuli.xx.kg/js/share.min.js"></script>

零依赖、无需初始化配置,引入后自动在页面右侧生成悬浮按钮。

登录注册 UI 组件 auth-widget.min.js
纯前端 UI,不绑定后端。一行引入即拥有登录/注册/邮箱验证码弹窗,支持悬浮或固定、自定义主题、明暗自适应。查看接口契约与教程 →
<script>
  window.AuthWidgetConfig = { apiBase: '/api/auth' };
</script>
<script src="https://liuli.xx.kg/js/auth-widget.min.js"></script>

必须配置 apiBase 指向你自己的后端(接口契约见教程页)。零依赖、自动渲染悬浮按钮。

打赏/赞助按钮 donate-widget.min.js
博客一键加打赏弹窗(支付宝/微信收款码 + 打赏记录),支持自定义样式、暗色自适应。后端是独立 Cloudflare Worker + KV。三步接入教程 → · 在线配置工具 →
<script src="https://liuli.xx.kg/js/donate-widget.min.js"
        data-kv-api-url="https://你的 worker.workers.dev"></script>

需要先部署配套 Worker(见教程页)。收款码在在线配置工具里上传。

阅读进度条 progress.js 未实现
页面顶部随滚动实时显示阅读进度,细条样式,自动适配明暗主题,长文/博客必备。
<script src="https://liuli.xx.kg/js/progress.js"></script>

零依赖,引入后自动在页面顶部生成进度条。

返回顶部按钮 backtop.js 未实现
滚动超过一屏后右下角浮现回到顶部按钮,点击平滑滚动回顶部,支持移动端触屏。
<script src="https://liuli.xx.kg/js/backtop.js"></script>

按钮自动出现/隐藏,无需任何配置。

一键复制文本 copytext.js 未实现
给任意元素加上 data-copy 属性,点击即复制其内容并弹出轻提示,适合链接、邀请码、代码片段。
<script src="https://liuli.xx.kg/js/copytext.js"></script>
<button data-copy="要复制的内容">点我复制</button>

支持带 data-copy 属性的任意元素,点击即复制。

全局页面水印 watermark.js 未实现
整页平铺斜向水印,监听 DOM 变化防止被删除,适合内部系统、文档站防泄露截图。
<script src="https://liuli.xx.kg/js/watermark.js"
        data-text="© 琉璃"></script>

通过 data-text 自定义水印文字。

图片懒加载 lazyload.js 未实现
使用 IntersectionObserver,图片进入视口才加载,带模糊占位,长图页/相册页提速明显。
<script src="https://liuli.xx.kg/js/lazyload.js"></script>
<img data-src="真实图地址" alt="">

将 img 的 src 换成 data-src 即可。

更多好用的工具类 JS 脚本持续收录中…