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

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

全屏和刷新按钮

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

  • 思源笔记

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

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

    26791 引用 • 111671 回帖
  • JavaScript

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

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

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

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

    227 引用 • 1641 回帖
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);

推荐标签 标签

  • AWS
    11 引用 • 28 回帖 • 5 关注
  • 分享

    有什么新发现就分享给大家吧!

    248 引用 • 1795 回帖 • 1 关注
  • Google

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

    49 引用 • 192 回帖 • 1 关注
  • Elasticsearch

    Elasticsearch 是一个基于 Lucene 的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎,基于 RESTful 接口。Elasticsearch 是用 Java 开发的,并作为 Apache 许可条款下的开放源码发布,是当前流行的企业级搜索引擎。设计用于云计算中,能够达到实时搜索,稳定,可靠,快速,安装使用方便。

    117 引用 • 99 回帖 • 200 关注
  • WebComponents

    Web Components 是 W3C 定义的标准,它给了前端开发者扩展浏览器标签的能力,可以方便地定制可复用组件,更好的进行模块化开发,解放了前端开发者的生产力。

    1 引用 • 13 关注
  • Spark

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

    74 引用 • 46 回帖 • 565 关注
  • WordPress

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

    46 引用 • 114 回帖 • 155 关注
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 117 关注
  • OpenCV
    15 引用 • 36 回帖 • 1 关注
  • Android

    Android 是一种以 Linux 为基础的开放源码操作系统,主要使用于便携设备。2005 年由 Google 收购注资,并拉拢多家制造商组成开放手机联盟开发改良,逐渐扩展到到平板电脑及其他领域上。

    337 引用 • 324 回帖 • 1 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 1 关注
  • CSDN

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

    14 引用 • 155 回帖 • 1 关注
  • 资讯

    资讯是用户因为及时地获得它并利用它而能够在相对短的时间内给自己带来价值的信息,资讯有时效性和地域性。

    56 引用 • 85 回帖
  • 域名

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

    43 引用 • 208 回帖 • 1 关注
  • OAuth

    OAuth 协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是 oAuth 的授权不会使第三方触及到用户的帐号信息(如用户名与密码),即第三方无需使用用户的用户名与密码就可以申请获得该用户资源的授权,因此 oAuth 是安全的。oAuth 是 Open Authorization 的简写。

    36 引用 • 103 回帖 • 36 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 44 关注
  • SEO

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

    36 引用 • 200 回帖 • 43 关注
  • IBM

    IBM(国际商业机器公司)或万国商业机器公司,简称 IBM(International Business Machines Corporation),总公司在纽约州阿蒙克市。1911 年托马斯·沃森创立于美国,是全球最大的信息技术和业务解决方案公司,拥有全球雇员 30 多万人,业务遍及 160 多个国家和地区。

    17 引用 • 53 回帖 • 147 关注
  • Hprose

    Hprose 是一款先进的轻量级、跨语言、跨平台、无侵入式、高性能动态远程对象调用引擎库。它不仅简单易用,而且功能强大。你无需专门学习,只需看上几眼,就能用它轻松构建分布式应用系统。

    9 引用 • 17 回帖 • 638 关注
  • 招聘

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

    188 引用 • 1057 回帖 • 1 关注
  • ReactiveX

    ReactiveX 是一个专注于异步编程与控制可观察数据(或者事件)流的 API。它组合了观察者模式,迭代器模式和函数式编程的优秀思想。

    1 引用 • 2 回帖 • 184 关注
  • 自由行
    1 关注
  • NetBeans

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

    78 引用 • 102 回帖 • 713 关注
  • Angular

    AngularAngularJS 的新版本。

    26 引用 • 66 回帖 • 562 关注
  • CAP

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

    12 引用 • 5 回帖 • 636 关注
  • SSL

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

    70 引用 • 193 回帖 • 414 关注