[js] 全屏和刷新按钮、右上角倒计时

本贴最后更新于 292 天前,其中的信息可能已经沧海桑田

全屏和刷新按钮

// js片段 // 通过快捷键(alt + p), 打开配置页面 function openSettingPage() { let keyInit = { ctrlKey: false, altKey: true, metaKey: false, shiftKey: false, key: 'P', keyCode: 80 } keyInit["bubbles"] = true; let keydownEvent = new KeyboardEvent('keydown', keyInit); document.getElementsByTagName("body")[0].dispatchEvent(keydownEvent); let keyUpEvent = new KeyboardEvent('keyup', keyInit); document.getElementsByTagName("body")[0].dispatchEvent(keyUpEvent); } // 添加全屏按钮 function addBtnFullScreen(perv_btn) { let barMode = document.getElementById(perv_btn); barMode.insertAdjacentHTML( "afterend", '<div id="fullscreen_page_btn" class="toolbar__item ariaLabel" aria-label="全屏"></div>' ); let settingBtn = document.getElementById("fullscreen_page_btn"); settingBtn.innerHTML = `<svg><use xlink:href="#iconFullscreen"></use></svg>`; settingBtn.addEventListener( "click", function (e) { if (!document.fullscreenElement) { document.documentElement.requestFullscreen(); } else { if (document.exitFullscreen) { document.exitFullscreen(); } } } ); return "fullscreen_page_btn"; } // 添加按钮, 并设置点击事件 // 添加 js代码片段 function addBtnJsSnippets(perv_btn) { let barMode = document.getElementById(perv_btn); barMode.insertAdjacentHTML( "afterend", '<div id="js_barSnippets_simulate_btn" class="toolbar__item ariaLabel" aria-label="JS代码片段"></div>' ); let settingBtn = document.getElementById("js_barSnippets_simulate_btn"); settingBtn.innerHTML = `<svg><use xlink:href="#iconCode"></use></svg>`; settingBtn.addEventListener( "click", function (e) { // 打开设置 openSettingPage(); // 点击外观 // 找到包含 data-name="appearance" 的 <li> 元素 var btn = document.querySelector('li[data-name="appearance"]'); btn.click(); // 点击 设置 // 获取按钮元素 btn = document.getElementById('codeSnippet'); btn.click(); // 点击 js // 获取按钮元素 setTimeout(() => { btn = document.querySelector('[data-type="js"]'); btn.click(); }, 200); } ); return "js_barSnippets_simulate_btn" } // 添加按钮, 并设置点击事件 // 添加 重新加载按钮 function addBtnRefresh(perv_btn) { let barMode = document.getElementById(perv_btn); barMode.insertAdjacentHTML( "afterend", '<div id="reload_page_btn" class="toolbar__item ariaLabel" aria-label="重新加载"></div>' ); let settingBtn = document.getElementById("reload_page_btn"); settingBtn.innerHTML = `<svg><use xlink:href="#iconRefresh"></use></svg>`; settingBtn.addEventListener( "click", function (e) { // 打开设置 openSettingPage(); // 点击外观 // 找到包含 data-name="appearance" 的 <li> 元素 var btn = document.querySelector('li[data-name="keymap"]'); btn.click(); // 点击 设置 // 获取按钮元素 btn = document.getElementById('keymapRefreshBtn'); btn.click(); } ); return "reload_page_btn" } /* 重新加载会有延时, 所以需要等待300ms之后再添加按钮 */ setTimeout(() => { js_btn_str = addBtnJsSnippets("plugin_Calendar-heatmap_0"); js_btn_str = addBtnFullScreen("plugin_Calendar-heatmap_0"); addBtnRefresh("barDock"); }, 300);

按照这个大佬的方法添加了个全屏按钮(ChatGPT 写的,不知道刷新按钮怎么删掉了,那就一起吧)

分享两个好用的代码片段

image.png

一个在右上角的倒计时(也是 ChatGPT 写的,大家看着改吧)

// 创建倒计时功能 function startCountdown(targetDate) { // 计算剩余天数的函数 function calculateDaysLeft() { let currentDate = new Date(); let differenceInTime = targetDate.getTime() - currentDate.getTime(); let daysLeft = Math.ceil(differenceInTime / (1000 * 3600 * 24)); // 将时间差转换为天数 return daysLeft; } // 每天更新倒计时显示 function updateCountdown() { let daysLeft = calculateDaysLeft(); let countdownElement = document.getElementById("countdown_days_display"); if (countdownElement) { countdownElement.innerText = `距离2025年高考剩余 ${daysLeft} 天`; } else { console.warn("找不到 countdown_days_display 元素"); } } // 首次插入倒计时显示元素到 protyle-breadcrumb__bar--nowrap 元素旁边 function insertCountdownElement() { let breadcrumbBar = document.querySelector('#AsriPluginsIconsDivider'); if (breadcrumbBar) { breadcrumbBar.insertAdjacentHTML( "afterend", `<div id="countdown_days_display" style="font-size: 16px; color: #454545; margin-right: 14px; margin-top: 7px;"></div>` ); updateCountdown(); // 插入后更新一次倒计时显示 } else { console.error("找不到 protyle-breadcrumb__bar--nowrap 元素"); } } // 每隔2秒检测倒计时元素是否存在 let checkInterval = setInterval(() => { let countdownElement = document.getElementById("countdown_days_display"); // 如果倒计时元素不存在,则重新插入并更新倒计时 if (!countdownElement) { insertCountdownElement(); console.log("倒计时元素不存在,重新插入"); } else { console.log("倒计时元素已存在,停止检测"); clearInterval(checkInterval); // 如果找到了元素,停止检测 } }, 2000); // 每2秒检测一次 // 设置定时器,每天更新一次倒计时 setInterval(updateCountdown, 24 * 60 * 60 * 1000); // 每24小时更新一次 } // 示例:设置目标日期(这里设置为2024年12月31日) let targetDate = new Date('2025-6-7'); startCountdown(targetDate);

image.png

  • 思源笔记

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

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

    26201 引用 • 108866 回帖 • 3 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    730 引用 • 1282 回帖 • 1 关注
  • 代码片段

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

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

    196 引用 • 1393 回帖
1 操作
JeffreyChen 在 2024-09-15 23:41:56 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 改为插入 HTML:

    image.png

    // 顶栏倒计时 JS片段 https://ld246.com/article/1726411686880/comment/1727489133697#comments // 设置文本内容和目标日期 const countdownMessage = '距离<span style="color: red; font-weight: bold;">国庆</span>剩余 ${daysLeft} 天'; const targetDateString = '2024-10-1'; const targetDate = new Date(targetDateString); function startCountdown(targetDate) { // 计算剩余天数的函数 function calculateDaysLeft() { let currentDate = new Date(); let differenceInTime = targetDate.getTime() - currentDate.getTime(); let daysLeft = Math.ceil(differenceInTime / (1000 * 3600 * 24) - 1); // 将时间差转换为天数;不计入当天所以 -1 return daysLeft; } // 更新倒计时显示 function updateCountdown() { let daysLeft = calculateDaysLeft(); let countdownElement = document.getElementById("countdown_days_display"); if (countdownElement) { countdownElement.innerHTML = countdownMessage.replace('${daysLeft}', daysLeft); // 使用 innerHTML 替代 innerText } else { console.warn("找不到 countdown_days_display 元素"); } } // 首次插入倒计时显示元素到 #toolbar > #drag 元素旁边 function insertCountdownElement() { let toolbarDrag = document.querySelector('#toolbar > #drag'); if (toolbarDrag) { toolbarDrag.insertAdjacentHTML( "afterend", `<div id="countdown_days_display" style="font-size: 12px; color: var(--b3-toolbar-color); margin-right: 14px; user-select:none;"></div>` ); updateCountdown(); // 插入后立即更新显示 } else { console.error("找不到 #toolbar > #drag 元素"); } } // 每隔1分钟检测倒计时元素是否存在 let checkInterval = setInterval(() => { let countdownElement = document.getElementById("countdown_days_display"); // 如果倒计时元素不存在,则重新插入 if (!countdownElement) { insertCountdownElement(); console.log("倒计时元素不存在,重新插入"); } else { console.log("倒计时元素已存在,停止检测"); clearInterval(checkInterval); // 如果找到了元素,停止检测 } }, 60 * 1000); // 每1分钟检测一次 // 立即插入倒计时显示元素,并在1分钟后开始定时更新 insertCountdownElement(); // 立即插入元素 setInterval(updateCountdown, 60 * 1000); // 每60秒更新一次(1分钟) } // 启动倒计时功能 startCountdown(targetDate);
  • 其他回帖
  • JOYCELEEEEE

    大佬,有个更近一步的小需求:对倒计时文本实现加粗更改字体颜色,看看能实现吗:

    距离国庆还有 X 天(“国庆”加粗)

    距离国庆还有 X 天(“国庆”改为红色)

    1 回复
  • 改了一下倒计时,可以在默认主题中使用:

    image.png

    // 顶栏倒计时 JS片段 https://ld246.com/article/1726411686880 // 设置文本内容和目标日期 const countdownMessage = "距离十月剩余 ${daysLeft} 天"; const targetDateString = '2024-10-1'; const targetDate = new Date(targetDateString); function startCountdown(targetDate) { // 计算剩余天数的函数 function calculateDaysLeft() { let currentDate = new Date(); let differenceInTime = targetDate.getTime() - currentDate.getTime(); let daysLeft = Math.ceil(differenceInTime / (1000 * 3600 * 24) - 1); // 将时间差转换为天数;不计入当天所以 -1 return daysLeft; } // 更新倒计时显示 function updateCountdown() { let daysLeft = calculateDaysLeft(); let countdownElement = document.getElementById("countdown_days_display"); if (countdownElement) { countdownElement.innerText = countdownMessage.replace('${daysLeft}', daysLeft); } else { console.warn("找不到 countdown_days_display 元素"); } } // 首次插入倒计时显示元素到 #toolbar > #drag 元素旁边 function insertCountdownElement() { let toolbarDrag = document.querySelector('#toolbar > #drag'); if (toolbarDrag) { toolbarDrag.insertAdjacentHTML( "afterend", `<div id="countdown_days_display" style="font-size: 12px; color: var(--b3-toolbar-color); margin-right: 14px; user-select:none;"></div>` ); updateCountdown(); // 插入后立即更新显示 } else { console.error("找不到 #toolbar > #drag 元素"); } } // 每隔1分钟检测倒计时元素是否存在 let checkInterval = setInterval(() => { let countdownElement = document.getElementById("countdown_days_display"); // 如果倒计时元素不存在,则重新插入 if (!countdownElement) { insertCountdownElement(); console.log("倒计时元素不存在,重新插入"); } else { console.log("倒计时元素已存在,停止检测"); clearInterval(checkInterval); // 如果找到了元素,停止检测 } }, 60 * 1000); // 每1分钟检测一次 // 立即插入倒计时显示元素,并在1分钟后开始定时更新 insertCountdownElement(); // 立即插入元素 setInterval(updateCountdown, 60 * 1000); // 每60秒更新一次(1分钟) } // 启动倒计时功能 startCountdown(targetDate);

    真的方便,我怎么想不到。

    image.png

    1 回复
    2 操作
    JeffreyChen 在 2024-09-27 00:12:25 更新了该回帖
    JeffreyChen 在 2024-09-16 00:36:11 更新了该回帖

推荐标签 标签

  • 酷鸟浏览器

    安全 · 稳定 · 快速
    为跨境从业人员提供专业的跨境浏览器

    3 引用 • 59 回帖 • 51 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    139 引用 • 269 回帖
  • Pipe

    Pipe 是一款小而美的开源博客平台。Pipe 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    134 引用 • 1127 回帖 • 110 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    246 引用 • 1338 回帖
  • 架构

    我们平时所说的“架构”主要是指软件架构,这是有关软件整体结构与组件的抽象描述,用于指导软件系统各个方面的设计。另外还有“业务架构”、“网络架构”、“硬件架构”等细分领域。

    142 引用 • 442 回帖 • 1 关注
  • RESTful

    一种软件架构设计风格而不是标准,提供了一组设计原则和约束条件,主要用于客户端和服务器交互类的软件。基于这个风格设计的软件可以更简洁,更有层次,更易于实现缓存等机制。

    30 引用 • 114 回帖 • 5 关注
  • 安全

    安全永远都不是一个小问题。

    199 引用 • 818 回帖
  • BookxNote

    BookxNote 是一款全新的电子书学习工具,助力您的学习与思考,让您的大脑更高效的记忆。

    笔记整理交给我,一心只读圣贤书。

    1 引用 • 1 回帖 • 3 关注
  • 音乐

    你听到信仰的声音了么?

    62 引用 • 512 回帖
  • Excel
    31 引用 • 28 回帖
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 233 回帖 • 5 关注
  • CloudFoundry

    Cloud Foundry 是 VMware 推出的业界第一个开源 PaaS 云平台,它支持多种框架、语言、运行时环境、云平台及应用服务,使开发人员能够在几秒钟内进行应用程序的部署和扩展,无需担心任何基础架构的问题。

    5 引用 • 18 回帖 • 194 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    24 引用 • 246 回帖
  • 国际化

    i18n(其来源是英文单词 internationalization 的首末字符 i 和 n,18 为中间的字符数)是“国际化”的简称。对程序来说,国际化是指在不修改代码的情况下,能根据不同语言及地区显示相应的界面。

    8 引用 • 26 回帖
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖 • 2 关注
  • 倾城之链
    23 引用 • 66 回帖 • 165 关注
  • Anytype
    3 引用 • 31 回帖 • 27 关注
  • PHP

    PHP(Hypertext Preprocessor)是一种开源脚本语言。语法吸收了 C 语言、 Java 和 Perl 的特点,主要适用于 Web 开发领域,据说是世界上最好的编程语言。

    167 引用 • 408 回帖 • 488 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 709 关注
  • Lute

    Lute 是一款结构化的 Markdown 引擎,支持 Go 和 JavaScript。

    29 引用 • 202 回帖 • 30 关注
  • Git

    Git 是 Linux Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。

    211 引用 • 358 回帖
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    151 引用 • 257 回帖 • 1 关注
  • Notion

    Notion - The all-in-one workspace for your notes, tasks, wikis, and databases.

    10 引用 • 77 回帖
  • 博客

    记录并分享人生的经历。

    273 引用 • 2389 回帖
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 410 关注