登录 注册

[js] 思源左侧空白区域显示心灵毒鸡汤或倒计时和顶部显示天气

根据这个帖子的灵感 [js] 思源笔记左侧空白部分显示自定义文字 写了这个显示心灵毒鸡汤的功能。

感觉不错，分享给大家。

功能介绍

  1. 左侧 dock 空白区域显示心灵毒鸡汤，可自定义自己的毒鸡汤及设定出现概率
  2. 双击显示下一个
  3. 右键复制到剪切板
  4. 可显示为跑马灯效果
  5. 可显示倒计时，可选择显示在左侧或右侧，倒计时的优先级高于心灵毒鸡汤和哲理名言
  6. 可在右侧 dock 空白区域显示哲理名言
  7. 顶部显示今日天气

使用方法，请参考代码参数中的注释。

效果

image.png
image.png image.png r107.gif image.png

动画效果实际上比较顺滑，录制原因有点抖。

代码

代码地址 https://gitee.com/wish163/mysoft/blob/main/%E6%80%9D%E6%BA%90/%E5%B7%A6%E4%BE%A7dock%E7%A9%BA%E7%99%BD%E5%8C%BA%E6%98%BE%E7%A4%BA%E5%BF%83%E7%81%B5%E6%AF%92%E9%B8%A1%E6%B1%A4%E6%88%96%E5%80%92%E8%AE%A1%E6%97%B6%E7%AD%89.js

砸彩蛋啦，打赏后可见~~
打赏 15 积分后可见
15 积分 • 23 打赏
  • 思源笔记

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

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

    25240 引用 • 104117 回帖
  • 代码片段

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

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

    151 引用 • 990 回帖 • 1 关注
1 引用
[js] 思源笔记左侧空白部分显示自定义文字 + 学习 • cxg318
13 操作
wilsons 在 2024-12-26 16:02:22 更新了该帖
wilsons 在 2024-12-25 11:37:55 更新了该帖
wilsons 在 2024-12-24 14:38:07 更新了该帖
wilsons 在 2024-12-23 22:13:10 更新了该帖 wilsons 在 2024-12-23 22:10:46 更新了该帖 wilsons 在 2024-12-20 17:49:16 更新了该帖 wilsons 在 2024-12-20 17:35:14 更新了该帖 wilsons 在 2024-12-20 15:58:51 更新了该帖 wilsons 在 2024-12-20 15:52:42 更新了该帖 wilsons 在 2024-12-20 15:50:43 更新了该帖 wilsons 在 2024-12-20 14:59:44 更新了该帖 wilsons 在 2024-12-20 09:51:29 更新了该帖 wilsons 在 2024-12-20 09:48:34 更新了该帖
23 打赏
2 感谢
7 收藏
1 引用
13 操作
26 回帖
10
3
3
2
1.2k 355 405 1 403

相关帖子

26 回帖
[js] 思源左侧空白区域显示心灵毒鸡汤或倒计时和顶部显示天气

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
  • sa--sa • • 1 赞同
    订阅者 捐赠者

    感觉可以展示随机笔记

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    已实现，该功能已添加到打赏区。

  • JOYCELEEEEE •
    订阅者

    可以展示在顶栏嘛 🙏

    2 回复
  • wilsons • • 1 评论
    付费者 捐赠者 作者

    顶栏不是显示文章标题了吗？二者显示到一起？还是把标题去掉？

    显示在顶栏倒计时的那个位置，上面 silvester 分享的篇
    JOYCELEEEEE •
  • Silvester •

    有个顶栏的倒计时，结合下估计可以。但我不会
    [js] 顶栏倒计时 - 链滴

  • Silvester •

    酷啊 😋

  • wilsons •
    付费者 捐赠者 作者

    已支持倒计时功能，见文档中截图。

  • lichlaughing • • 2 赞同 via macOS
    订阅者

    既然左侧可以，那么右侧是不是也可以？那样的话中间是不是也可以？好家伙，贴对联既视感 😋

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    😄 已经实现了右侧空白区域显示哲理名言，不过不是动态显示，是固定的。

    查看效果图
    1 操作
    wilsons 在 2024-12-20 17:39:47 更新了该回帖
  • stevehfut •
    付费者

    总算是把思源空白的地方利用上了trollface

  • CongSec • • 1 • 1 评论
    付费者 捐赠者

    image.png

    😂

    1 回复
    虎狼之词
    ilovesiyuan •
  • wilsons •
    付费者 捐赠者 作者

    这个调用的第三方 API,😄，我 gitee 里还有个毒鸡汤文本，感觉比这个 API.写的好。你也可以找找好的 API 改改

    1 回复
  • lichlaughing • via macOS
    订阅者

    厉害厉害，那么接下来就差横批了。😂

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    😄 横批在这
    [js] 顶栏倒计时 - 链滴

  • MasterYS •
    付费者

    大佬是真的厉害，哪里都能看到你的身影，已打赏。

    可以在左边或者顶栏显示当天的天气和温度嘛

    1 回复
  • wilsons • • 1
    付费者 捐赠者 作者

    已更新，新增顶部显示今日天气

    参数 const showWeather = true; 可控制是否显示。

    image.png

    1 回复
  • MasterYS •
    付费者

    感谢大佬 👍

  • lichlaughing • via macOS
    订阅者

    毒鸡汤太毒了，有的不堪入目。 建议改成古诗词，熏陶下。我尝试修改了下：

    
//每日一言
    async function yiyan(callback) {
        if (showCountdown) {
            // 定义目标日期，比如（2025年1月1日）
            const targetDate = new Date(countdownExpireDate + 'T00:00:00');
            // 获取当前日期
            const currentDate = new Date();
            // 计算时间差（以毫秒为单位）
            const timeDifference = targetDate - currentDate;
            // 将毫秒转换为天数
            const daysRemaining = Math.ceil(timeDifference / (1000 * 60 * 60 * 24));
            // 输出结果
            const response = countdownTemplate.replace(/\{day\}/gi, daysRemaining);
            callback(response);
        } else {
            /*  var response = await fetch('https://v.api.aa1.cn/api/yiyan/index.php');
            response = await response.text();
            response = extractTextFromHtml(response);
            response = cleanText(response);
            callback(response); */

            // https://www.jinrishici.com/doc/
            // https://v2.jinrishici.com/token
            var response = await fetch('https://v2.jinrishici.com/sentence', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-User-Token': '通过https://v2.jinrishici.com/token获取一个'
                }
            });
            response = await response.json();
            var content =
                response.data.content +
                '《' +
                response.data.origin.title +
                '》' +
                response.data.origin.author;
            callback(content);
        }
    }
​

    效果如下：

    1IVJyFjh3d7X7STHdP6TH.png

    1 回复
  • wilsons • • 1
    付费者 捐赠者 作者

    👍 我换了个接口 @lichlaughing @CongSec 再试试呢

    不过，也可以下载这个文本，自己实现 https://gitee.com/wish163/mysoft/blob/main/%E6%95%B0%E6%8D%AE/%E5%BF%83%E7%81%B5%E6%AF%92%E9%B8%A1%E6%B1%A4.txt

    1 操作
    wilsons 在 2024-12-25 11:40:01 更新了该回帖
  • kuaizi • via Android
    付费者

    快过年了，干脆整副对联上去

    1 回复
  • ebird98 • via Linux
    付费者 捐赠者

    正想说，那地方就适合放古典的鸡汤，或者格言联/趣味联。😂

  • wilsons •
    付费者 捐赠者 作者

    没相关 api，谁有 api 可以分享下或者修改下 function yiyan(callback) 这个函数即可

  • Jahzeds •
    付费者

    感谢，已经用上了！

  • Jahzeds •
    付费者

    dock 区域宽度有方法调整吗

    1 回复
  • wilsons •
    付费者 捐赠者 作者

    可以，这是左侧 dock 示例，根据自己情况调整

    .dock#dockLeft.dock--vertical {
  /* 左侧dock栏宽度 */
  width:52px;
  /* 每个图标的内外边距，计算公式是 (dock宽-图标宽)/4 */
  .dock__item {
      padding: 6px; /* 内边距 */
      margin: 7px; /* 外边距，可根据需要微调 */
  }
  /* 图标的宽度，高度自适应，1:1 显示，计算公式是 (dock宽-图标内外边距和*2)/2 */
  .dock__item svg {
      width: 20px;
      height: 20px;
  }
}
​
    1 操作
    wilsons 在 2024-12-28 06:32:39 更新了该回帖
  • Jahzeds •
    付费者

    改成左边 毒鸡汤 右边楼上的 每日一言

请输入回帖内容 ...
wilsons
人生最大的敌人是自己，战胜自己，才能超越一切。
回帖
1295
 帖子
54
 积分
42024