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

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

全屏和刷新按钮

// 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

  • 思源笔记

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

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

    26399 引用 • 109780 回帖 • 2 关注
  • JavaScript

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

    730 引用 • 1283 回帖
  • 代码片段

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

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

    204 引用 • 1481 回帖 • 2 关注
1 操作
JeffreyChen 在 2024-09-15 23:41:56 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • 改了一下倒计时,可以在默认主题中使用:

    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 更新了该回帖
  • JOYCELEEEEE

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

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

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

    1 回复
  • 改为插入 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);

推荐标签 标签

  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 269 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 352 关注
  • 微服务

    微服务架构是一种架构模式,它提倡将单一应用划分成一组小的服务。服务之间互相协调,互相配合,为用户提供最终价值。每个服务运行在独立的进程中。服务于服务之间才用轻量级的通信机制互相沟通。每个服务都围绕着具体业务构建,能够被独立的部署。

    96 引用 • 155 回帖 • 1 关注
  • JVM

    JVM(Java Virtual Machine)Java 虚拟机是一个微型操作系统,有自己的硬件构架体系,还有相应的指令系统。能够识别 Java 独特的 .class 文件(字节码),能够将这些文件中的信息读取出来,使得 Java 程序只需要生成 Java 虚拟机上的字节码后就能在不同操作系统平台上进行运行。

    180 引用 • 120 回帖 • 1 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    268 引用 • 666 回帖 • 1 关注
  • 爬虫

    网络爬虫(Spider、Crawler),是一种按照一定的规则,自动地抓取万维网信息的程序。

    106 引用 • 275 回帖 • 1 关注
  • CAP

    CAP 指的是在一个分布式系统中, Consistency(一致性)、 Availability(可用性)、Partition tolerance(分区容错性),三者不可兼得。

    12 引用 • 5 回帖 • 633 关注
  • B3log

    B3log 是一个开源组织,名字来源于“Bulletin Board Blog”缩写,目标是将独立博客与论坛结合,形成一种新的网络社区体验,详细请看 B3log 构思。目前 B3log 已经开源了多款产品:SymSoloVditor思源笔记

    1062 引用 • 3455 回帖 • 151 关注
  • HBase

    HBase 是一个分布式的、面向列的开源数据库,该技术来源于 Fay Chang 所撰写的 Google 论文 “Bigtable:一个结构化数据的分布式存储系统”。就像 Bigtable 利用了 Google 文件系统所提供的分布式数据存储一样,HBase 在 Hadoop 之上提供了类似于 Bigtable 的能力。

    17 引用 • 6 回帖 • 71 关注
  • 大疆创新

    深圳市大疆创新科技有限公司(DJI-Innovations,简称 DJI),成立于 2006 年,是全球领先的无人飞行器控制系统及无人机解决方案的研发和生产商,客户遍布全球 100 多个国家。通过持续的创新,大疆致力于为无人机工业、行业用户以及专业航拍应用提供性能最强、体验最佳的革命性智能飞控产品和解决方案。

    2 引用 • 14 回帖 • 1 关注
  • WordPress

    WordPress 是一个使用 PHP 语言开发的博客平台,用户可以在支持 PHP 和 MySQL 数据库的服务器上架设自己的博客。也可以把 WordPress 当作一个内容管理系统(CMS)来使用。WordPress 是一个免费的开源项目,在 GNU 通用公共许可证(GPLv2)下授权发布。

    46 引用 • 114 回帖 • 167 关注
  • CSS

    CSS(Cascading Style Sheet)“层叠样式表”是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    198 引用 • 543 回帖 • 3 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    36 引用 • 200 回帖 • 39 关注
  • CSDN

    CSDN (Chinese Software Developer Network) 创立于 1999 年,是中国的 IT 社区和服务平台,为中国的软件开发者和 IT 从业者提供知识传播、职业发展、软件开发等全生命周期服务,满足他们在职业发展中学习及共享知识和信息、建立职业发展社交圈、通过软件开发实现技术商业化等刚性需求。

    14 引用 • 155 回帖
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 67 回帖 • 444 关注
  • 友情链接

    确认过眼神后的灵魂连接,站在链在!

    24 引用 • 373 回帖
  • Bootstrap

    Bootstrap 是 Twitter 推出的一个用于前端开发的开源工具包。它由 Twitter 的设计师 Mark Otto 和 Jacob Thornton 合作开发,是一个 CSS / HTML 框架。

    18 引用 • 33 回帖 • 649 关注
  • ZeroNet

    ZeroNet 是一个基于比特币加密技术和 BT 网络技术的去中心化的、开放开源的网络和交流系统。

    1 引用 • 21 回帖 • 650 关注
  • Log4j

    Log4j 是 Apache 开源的一款使用广泛的 Java 日志组件。

    20 引用 • 18 回帖 • 37 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 280 关注
  • 开源中国

    开源中国是目前中国最大的开源技术社区。传播开源的理念,推广开源项目,为 IT 开发者提供了一个发现、使用、并交流开源技术的平台。目前开源中国社区已收录超过两万款开源软件。

    7 引用 • 86 回帖
  • VirtualBox

    VirtualBox 是一款开源虚拟机软件,最早由德国 Innotek 公司开发,由 Sun Microsystems 公司出品的软件,使用 Qt 编写,在 Sun 被 Oracle 收购后正式更名成 Oracle VM VirtualBox。

    10 引用 • 2 回帖 • 18 关注
  • 程序员

    程序员是从事程序开发、程序维护的专业人员。

    591 引用 • 3528 回帖
  • PostgreSQL

    PostgreSQL 是一款功能强大的企业级数据库系统,在 BSD 开源许可证下发布。

    22 引用 • 22 回帖
  • JavaScript

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

    730 引用 • 1283 回帖
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 155 关注
  • 博客

    记录并分享人生的经历。

    273 引用 • 2389 回帖