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

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

全屏和刷新按钮

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

  • 思源笔记

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

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

    24744 引用 • 101680 回帖
  • JavaScript

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

    729 引用 • 1278 回帖
  • 代码片段

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

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

    132 引用 • 876 回帖 • 4 关注
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 更新了该回帖

推荐标签 标签

  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖
  • ngrok

    ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

    7 引用 • 63 回帖 • 647 关注
  • CongSec

    本标签主要用于分享网络空间安全专业的学习笔记

    1 引用 • 1 回帖 • 23 关注
  • Spark

    Spark 是 UC Berkeley AMP lab 所开源的类 Hadoop MapReduce 的通用并行框架。Spark 拥有 Hadoop MapReduce 所具有的优点;但不同于 MapReduce 的是 Job 中间输出结果可以保存在内存中,从而不再需要读写 HDFS,因此 Spark 能更好地适用于数据挖掘与机器学习等需要迭代的 MapReduce 的算法。

    74 引用 • 46 回帖 • 567 关注
  • Netty

    Netty 是一个基于 NIO 的客户端-服务器编程框架,使用 Netty 可以让你快速、简单地开发出一个可维护、高性能的网络应用,例如实现了某种协议的客户、服务端应用。

    49 引用 • 33 回帖 • 33 关注
  • Google

    Google(Google Inc.,NASDAQ:GOOG)是一家美国上市公司(公有股份公司),于 1998 年 9 月 7 日以私有股份公司的形式创立,设计并管理一个互联网搜索引擎。Google 公司的总部称作“Googleplex”,它位于加利福尼亚山景城。Google 目前被公认为是全球规模最大的搜索引擎,它提供了简单易用的免费服务。不作恶(Don't be evil)是谷歌公司的一项非正式的公司口号。

    49 引用 • 192 回帖
  • QQ

    1999 年 2 月腾讯正式推出“腾讯 QQ”,在线用户由 1999 年的 2 人(马化腾和张志东)到现在已经发展到上亿用户了,在线人数超过一亿,是目前使用最广泛的聊天软件之一。

    45 引用 • 557 回帖 • 1 关注
  • FlowUs

    FlowUs.息流 个人及团队的新一代生产力工具。

    让复杂的信息管理更轻松、自由、充满创意。

    1 引用
  • Kotlin

    Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,由 JetBrains 设计开发并开源。Kotlin 可以编译成 Java 字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行。在 Google I/O 2017 中,Google 宣布 Kotlin 成为 Android 官方开发语言。

    19 引用 • 33 回帖 • 75 关注
  • Gitea

    Gitea 是一个开源社区驱动的轻量级代码托管解决方案,后端采用 Go 编写,采用 MIT 许可证。

    5 引用 • 16 回帖
  • ZooKeeper

    ZooKeeper 是一个分布式的,开放源码的分布式应用程序协调服务,是 Google 的 Chubby 一个开源的实现,是 Hadoop 和 HBase 的重要组件。它是一个为分布式应用提供一致性服务的软件,提供的功能包括:配置维护、域名服务、分布式同步、组服务等。

    59 引用 • 29 回帖 • 1 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    124 引用 • 74 回帖
  • Vue.js

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

    267 引用 • 666 回帖 • 1 关注
  • Anytype
    3 引用 • 31 回帖 • 12 关注
  • CSDN

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

    14 引用 • 155 回帖
  • 招聘

    哪里都缺人,哪里都不缺人。

    189 引用 • 1057 回帖
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 381 关注
  • NetBeans

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

    78 引用 • 102 回帖 • 700 关注
  • PostgreSQL

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

    22 引用 • 22 回帖 • 3 关注
  • SSL

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

    70 引用 • 193 回帖 • 412 关注
  • 微服务

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

    96 引用 • 155 回帖
  • 大疆创新

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

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

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • Solidity

    Solidity 是一种智能合约高级语言,运行在 [以太坊] 虚拟机(EVM)之上。它的语法接近于 JavaScript,是一种面向对象的语言。

    3 引用 • 18 回帖 • 431 关注
  • Flume

    Flume 是一套分布式的、可靠的,可用于有效地收集、聚合和搬运大量日志数据的服务架构。

    9 引用 • 6 回帖 • 652 关注
  • Postman

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

    4 引用 • 3 回帖
  • OkHttp

    OkHttp 是一款 HTTP & HTTP/2 客户端库,专为 Android 和 Java 应用打造。

    16 引用 • 6 回帖 • 83 关注