[js] 顶栏倒计时

本贴最后更新于 263 天前,其中的信息可能已经东海扬尘

效果是在顶栏添加一行文本:

image.png

JS 代码片段:

// 顶栏倒计时 JS片段 // author by JeffreyChen https://ld246.com/article/1728048965009 (function() { // 清除之前可能的定时器 if (window.__countdownInterval) { clearInterval(window.__countdownInterval); window.__countdownInterval = null; } // 设置标题,替换样式 const baseMessage = '距离<span style="color: red;"> 蓝桥杯 </span>剩余'; const targetDate = new Date('2025-04-14'); const toolbarSelector = '#toolbar > #drag'; let countdownElement = null; // 倒计时元素缓存 let lastDaysLeft = null; // 存储上一次的剩余天数 let initializeAttempts = 0; // 初始化重试计数 function calculateDaysLeft() { const currentDate = new Date(); const differenceInTime = targetDate - currentDate; return Math.max(Math.ceil(differenceInTime / (1000 * 3600 * 24)) - 1, 0); } function updateCountdown() { const daysLeft = calculateDaysLeft(); if (daysLeft !== lastDaysLeft) { // 仅在剩余天数更新时改变 DOM if (countdownElement) { countdownElement.innerHTML = `${baseMessage} ${daysLeft} 天`; lastDaysLeft = daysLeft; // 更新上一次的剩余天数 } } } function insertCountdownElement() { if (!countdownElement) { const toolbarDrag = document.querySelector(toolbarSelector); if (toolbarDrag) { countdownElement = document.getElementById("countdown_days_display"); if (!countdownElement) { toolbarDrag.insertAdjacentHTML( "afterend", `<div id="countdown_days_display" style="font-size: 12px; color: var(--b3-toolbar-color); margin-right: 14px; user-select:none;"> </div>` ); countdownElement = document.getElementById("countdown_days_display"); } updateCountdown(); // 初次载入后立即更新倒计时 initializeAttempts = 0; // 重置初始化重试计数 // 设置新的定时器并保存ID到全局变量 window.__countdownInterval = setInterval(updateCountdown, 60 * 1000); // 每60秒更新一次 } } } function tryInitializeCountdown() { insertCountdownElement(); if (!countdownElement && initializeAttempts < 5) { initializeAttempts++; console.error(`无法找到指定的工具栏挂载点或倒计时元素,第${initializeAttempts}次重试`); setTimeout(tryInitializeCountdown, Math.min(3000 * initializeAttempts, 15000)); // 指数退避重试延迟 } } tryInitializeCountdown(); })();

鸣谢

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

打赏 30 积分后可见
30 积分 • 8 打赏
  • 思源笔记

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

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

    26050 引用 • 108148 回帖
  • 代码片段

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

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

    189 引用 • 1349 回帖 • 1 关注
1 操作
JeffreyChen 在 2025-04-08 12:35:43 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • Floria233

    弄好了,谢谢大大,我觉得还行。

    这个天数会随着底部状态栏缩进。

    唯一的弊端是,底部状态栏是有动画的(有各种信息提示)所以这个状态栏会动来动去干扰注意。

    把天数颜色之类的修改低调点,问题就解决了。

    image.png

  • 其他回帖
  • Floria233

    大大,这个倒计时再写一个版本吗?

    很好用,可是这个有点太长了,顶栏还有其他插件之类的,如果用了类似 asri 或者 savor 的主题,顶栏和标题栏都会合并,这种情况下,这个顶栏处的倒计时相当占位置,所能打开的标题和插件都会大幅削减。

    请问可以改一下,将这个倒计时改到底部状态栏吗?

    image.png

    这个地方。

    1 回复
  • GloR

    要是能在顶栏搞个番茄钟计时条就更完美了 👍

  • 换位置的话只需要把 toolbarSelector = '#toolbar > #drag' 改成 toolbarSelector = '.status__msg' 就行,但样式不太好适配

    1 回复
  • 查看全部回帖
JeffreyChen
思源笔记同步教程:https://ld246.com/article/1692089679062 爱发电:https://afdian.com/a/JeffreyChen

推荐标签 标签

  • Android

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

    336 引用 • 324 回帖 • 1 关注
  • CloudFoundry

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

    5 引用 • 18 回帖 • 190 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 450 关注
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 248 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    10005 引用 • 45482 回帖 • 73 关注
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • MySQL

    MySQL 是一个关系型数据库管理系统,由瑞典 MySQL AB 公司开发,目前属于 Oracle 公司。MySQL 是最流行的关系型数据库管理系统之一。

    693 引用 • 537 回帖
  • 前端

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

    246 引用 • 1338 回帖
  • 微信

    腾讯公司 2011 年 1 月 21 日推出的一款手机通讯软件。用户可以通过摇一摇、搜索号码、扫描二维码等添加好友和关注公众平台,同时可以将自己看到的精彩内容分享到微信朋友圈。

    133 引用 • 796 回帖
  • OkHttp

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

    16 引用 • 6 回帖 • 94 关注
  • Vue.js

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

    268 引用 • 666 回帖 • 2 关注
  • ZeroNet

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

    1 引用 • 21 回帖 • 654 关注
  • Hexo

    Hexo 是一款快速、简洁且高效的博客框架,使用 Node.js 编写。

    22 引用 • 148 回帖 • 5 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    35 引用 • 468 回帖 • 762 关注
  • BookxNote

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

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

    1 引用 • 1 回帖
  • 智能合约

    智能合约(Smart contract)是一种旨在以信息化方式传播、验证或执行合同的计算机协议。智能合约允许在没有第三方的情况下进行可信交易,这些交易可追踪且不可逆转。智能合约概念于 1994 年由 Nick Szabo 首次提出。

    1 引用 • 11 回帖 • 4 关注
  • Git

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

    211 引用 • 358 回帖 • 1 关注
  • Sublime

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

    10 引用 • 5 回帖 • 2 关注
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 406 关注
  • JWT

    JWT(JSON Web Token)是一种用于双方之间传递信息的简洁的、安全的表述性声明规范。JWT 作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以 JSON 的形式安全的传递信息。

    20 引用 • 15 回帖 • 27 关注
  • WiFiDog

    WiFiDog 是一套开源的无线热点认证管理工具,主要功能包括:位置相关的内容递送;用户认证和授权;集中式网络监控。

    1 引用 • 7 回帖 • 614 关注
  • CongSec

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

    1 引用 • 1 回帖 • 37 关注
  • 京东

    京东是中国最大的自营式电商企业,2015 年第一季度在中国自营式 B2C 电商市场的占有率为 56.3%。2014 年 5 月,京东在美国纳斯达克证券交易所正式挂牌上市(股票代码:JD),是中国第一个成功赴美上市的大型综合型电商平台,与腾讯、百度等中国互联网巨头共同跻身全球前十大互联网公司排行榜。

    14 引用 • 102 回帖 • 314 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    188 引用 • 319 回帖 • 241 关注
  • Shell

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

    125 引用 • 74 回帖
  • 分享

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

    248 引用 • 1794 回帖 • 1 关注
  • SOHO

    为成为自由职业者在家办公而努力吧!

    7 引用 • 55 回帖