[js] 思源屏保,酷炫防偷窥

缘起

昨日看到 @zxkmm 大佬的帖子 思源笔记防烧屏插件震 (hu) 撼(nao)发布 感觉不错,不知道大佬的轻微移动元素是怎么移动的,没有测试。

但我觉得只需要有个屏保就好了,既能防烧屏,又能在意外离开时防偷窥,另外还能展示一些自己喜欢的文字,可谓是一举多得。

(更新:这里理解有误,参考评论区 ZXKMM 大佬的回复,这里防烧屏只能起到一定的作用,不能代替 ZXKMM 大佬的插件,因为运行时间和范围有限,参考评论区 wilson 后续评论区的补充说明。)

于是,我就让 Qwen 写了个初始版本,让 deepseek 和 chatgpt 修 bug。

实在是 Qwen 自己写的 bug,自己找不出来,只能借助 deepseek 了,但 deepseek 这家伙,可能是最近改版的原因,老喜欢自作主张,把代码改动太多,要给很多限制性提示词才行,不过能力还可以,改 bug 有一套。

经过 deppseek 的噼里啪啦之后,基本没什么大 bug 了。这时微调,就请 chatgpt 完成了,实在是和 deepseek 交流太费口舌了,这家伙总爱自由发挥,以前也没这样,哎,最近飘了 😄。

真正体验了一把 Vibe Coding,但目前的 ai 水平有限,问题复杂了还是比较不省心的。有些问题,可能换几个 ai 都无法解决,还得靠自己看看,了解原因后再引导 ai 去改。

总之,真正的 Vibe Coding 任重而道远,目前最多算是 Assisted Coding(辅助编程)。

功能简介

三大使用场景:

  1. 文字屏保 + 密码解锁
  2. 仅文字屏保,无需密码解锁(适用于仅仅为了防烧屏,不想解锁那么麻烦)
  3. 仅密码解锁,不显示文字屏保(适用于仅想意外离开后,重新操作需要解锁的用户)

效果展示

(说明:录屏需要,相关参数都调整的以方便录屏为准(比如加快动画效果,减少等待等),实际效果以代码默认参数为准)

文字屏保 + 密码解锁

r163.gif

仅文字屏保,无需密码解锁

r164.gif

仅密码解锁,不显示文字屏保

r165.gif

心灵毒鸡汤显示效果

r166.gif

关键参数使用说明

enableTextMove 是否开启文字屏保 true/false

texts 屏保显示的文本列表,每个单独一行,当 textMode=1 时有效

enablePassword 是否结束屏保时需要输入密码解锁

password 解锁密码,默认密码 3 个空格,方便快速输入

dujitangData 心灵毒鸡汤下载地址

textMode 文本显示模式,1 静态文本(即上文 texts 参数的值) 2 心灵毒鸡汤

idleTime 空闲多少分钟后启动屏保,默认 10 分钟,小于 1 分钟可以用分数表示,比如 1/6 表示 10 秒

textMoveInterval 文字移动间隔,单位毫秒,默认 7 秒(间隔过小会较占用 cpu/gpu 资源)

代码

https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E7%AE%80%E5%8D%95%E5%B1%8F%E4%BF%9D.js

如何使用

如何使用代码片段? - 思源笔记社区平台

注意事项

注意,该屏保解锁的密码仅仅形式主义,并不是对数据进行真正的加密,刷新页面也会让解锁失效。

⚠️ 请勿将重要数据通过这种方式进行保护!!! 由此,引起的任何安全问题均与作者无关。

免责声明

本文所提供的代码仅是 demo 或仍处于实验阶段,仅供学习与参考之用。
请在充分测试、确认无误后再谨慎使用,切勿直接用于生产环境
如因使用本文所述方法造成任何问题,本人不承担任何责任。

如你有任何疑问或优化建议,欢迎留言交流,共同进步!

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    28446 引用 • 119783 回帖
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    285 引用 • 1986 回帖
2 操作
wilsons 在 2025-08-04 23:16:32 更新了该帖
wilsons 在 2025-08-03 09:48:11 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • wilsons

    代码织就锦屏新,
    字走龙蛇避烙痕。
    十息未动轻纱落,
    半藏玄机半护君。

  • 其他回帖
  • wilsons 1 1 评论

    👍 感谢大佬的科普,学习到了。

    我也不是很懂,刚才请教了下 ai,ai 说移动像素是最好的办法。

    传统屏保做到以下也是有效的

    如果满足以下条件,是有效的

    条件 说明
    ✅ 位置完全随机且均匀分布 覆盖全屏所有区域,不能集中在中部
    ✅ 内容简单、低亮度 使用灰阶、低对比度图案,避免高亮白块
    ✅ 图案不包含固定元素 比如不要每次都是同一个“雪花”图标
    ✅ 显示时间合理 5 秒不算长,但配合频繁切换也可接受
    ✅ 不干扰用户 用户回来时能立即消失

    👉 这种机制本质上就是一种伪随机像素负载均衡系统,类似于“动态壁纸 + 位移”。

    📌 结论
    如果你的“屏保”是一个全屏、低亮度、随机分布、频繁切换、无固定图案的系统,
    那么它可以作为一种辅助防烧手段,甚至接近专业级的“像素抖动”技术。

    所以,如果想纯粹防烧屏,还是老老实实用大佬的 思源笔记防烧屏插件震 (hu) 撼(nao)发布 插件吧

    如果你主要为了酷炫或防偷窥,可以用这个代码,防烧上也基本符合了 ai 所说的功能,能起到一定的防烧屏作用。


    给 ai 看了代码,给出的结论如下:

    和专业防烧插件的区别

    对比项 你的代码 ZXKMM 大佬的插件
    目标 屏保 + 防偷窥 + 酷炫 专为防烧屏设计
    触发时机 空闲 10 分钟后启动 持续运行,实时微移
    移动对象 屏保文字(局部) 整个思源界面元素(全局)
    移动频率 每 7 秒一次(可调) 定期轻微位移(无感)
    是否需要激活 是(空闲后才开始) 否(一直生效)
    防烧效率 辅助级(有一定作用) 专业级(核心防护)

    📌 所以说:

    你的代码不能替代专业防烧插件,但可以作为“补充手段”或“个性化方案中的意外之喜”

    另外,ai 还给出了一定的优化措施,为了美观,就先不改了。

    1 操作
    wilsons 在 2025-08-04 23:08:32 更新了该回帖
    我的插件只适配了手机
    zxkmm
  • wilsons

    哈哈 zxkmn 原贴是手机防烧屏所以都支持了。

    如果不想支持手机,可以在代码开头,即 (sync ()=>{ 下面添加下面的代码即可

    if(!!document.getElementById("sidebar")) return;

  • zxkmm 1 1 赞同

    感谢大佬分享。

    关于烧屏的产生有一些误会。

    在以前的 crt 显示器上,像 DVD 移动屏保那样的功能确实可以避免烧屏;

    在现在的 OLED 上,屏幕上烧出一个图案的可能性是按那个图案在屏幕上的总时间来定的,例如,抖音那个加号图案的烧屏,即使你每 5 秒钟让它隐藏一秒,只要你看的时间够长,他也会烧屏。唯一避免烧屏的方法就是让那个图案稍微移动,不要一直待在一个位置,而不是时不时用其他图案覆盖一会,或者不显示一会,因为没用

    1 回复
  • 查看全部回帖
wilsons
正式入驻知乎了,以后新贴主要在这里。 欢迎大家订阅关注! 你的关注对我是莫大鼓励,也能让我持续产出优质内容,我们一起成长 🙏 点这里立即关注:https://www.zhihu.com/people/wilsonses