[js] 顶栏倒计时

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

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

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 打赏
  • 思源笔记

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

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

    25279 引用 • 104297 回帖
  • 代码片段

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

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

    153 引用 • 1000 回帖
1 操作
JeffreyChen 在 2025-04-08 12:35:43 更新了该帖

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • EmberSky via Android

    6

  • Floria233

    这个 very good,要是能更多花样就好了,比如颜文字之类的……

    为什么我总在这种地方喜欢花里胡哨的呢?O(∩_∩)O 哈哈~

  • xnyshu via macOS

    天数的颜色可以设置吗?

    1 回复
  • 这样改试试:

    ${baseMessage} ${daysLeft} 天 ↓ ${baseMessage}<span style="color: red;"> ${daysLeft} </span>天
  • hqweay via iPhone

    点赞 有趣的用法

  • daloo

    要是知道自己在哪天狗屁再来这么一个倒计时会不会更励志 😄

    1 回复
  • EmberSky 1 评论 via Android

    要不设置成明天?

    这种事情建议慎重,还是不要和网友商议了
    daloo
  • Floria233

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

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

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

    image.png

    这个地方。

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

    1 回复
  • Floria233

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

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

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

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

    image.png

  • GloR

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

请输入回帖内容 ...
JeffreyChen
思源是支持 Markdown 语法输入的块编辑器,不是 Markdown 文件编辑器; 思源笔记同步教程:https://ld246.com/article/1692089679062 爱发电:https://afdian.com/a/JeffreyChen

推荐标签 标签

  • Node.js

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

    139 引用 • 269 回帖 • 2 关注
  • 叶归
    5 引用 • 16 回帖 • 12 关注
  • 生活

    生活是指人类生存过程中的各项活动的总和,范畴较广,一般指为幸福的意义而存在。生活实际上是对人生的一种诠释。生活包括人类在社会中与自己息息相关的日常活动和心理影射。

    230 引用 • 1454 回帖
  • 外包

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

    26 引用 • 233 回帖 • 4 关注
  • B3log

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

    1063 引用 • 3455 回帖 • 160 关注
  • PWL

    组织简介

    用爱发电 (Programming With Love) 是一个以开源精神为核心的民间开源爱好者技术组织,“用爱发电”象征开源与贡献精神,加入组织,代表你将遵守组织的“个人开源爱好者”的各项条款。申请加入:用爱发电组织邀请帖
    用爱发电组织官网:https://programmingwithlove.stackoverflow.wiki/

    用爱发电组织的核心驱动力:

    • 遵守开源守则,体现开源&贡献精神:以分享为目的,拒绝非法牟利。
    • 自我保护:使用适当的 License 保护自己的原创作品。
    • 尊重他人:不以各种理由、各种漏洞进行未经允许的抄袭、散播、洩露;以礼相待,尊重所有对社区做出贡献的开发者;通过他人的分享习得知识,要留下足迹,表示感谢。
    • 热爱编程、热爱学习:加入组织,热爱编程是首当其要的。我们欢迎热爱讨论、分享、提问的朋友,也同样欢迎默默成就的朋友。
    • 倾听:正确并恳切对待、处理问题与建议,及时修复开源项目的 Bug ,及时与反馈者沟通。不抬杠、不无视、不辱骂。
    • 平视:不诋毁、轻视、嘲讽其他开发者,主动提出建议、施以帮助,以和谐为本。只要他人肯努力,你也可能会被昔日小看的人所超越,所以请保持谦虚。
    • 乐观且活跃:你的努力决定了你的高度。不要放弃,多年后回头俯瞰,才会发现自己已经成就往日所仰望的水平。积极地将项目开源,帮助他人学习、改进,自己也会获得相应的提升、成就与成就感。
    1 引用 • 487 回帖 • 6 关注
  • Hprose

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

    9 引用 • 17 回帖 • 632 关注
  • BAE

    百度应用引擎(Baidu App Engine)提供了 PHP、Java、Python 的执行环境,以及云存储、消息服务、云数据库等全面的云服务。它可以让开发者实现自动地部署和管理应用,并且提供动态扩容和负载均衡的运行环境,让开发者不用考虑高成本的运维工作,只需专注于业务逻辑,大大降低了开发者学习和迁移的成本。

    19 引用 • 75 回帖 • 668 关注
  • OnlyOffice
    4 引用 • 21 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖
  • Openfire

    Openfire 是开源的、基于可拓展通讯和表示协议 (XMPP)、采用 Java 编程语言开发的实时协作服务器。Openfire 的效率很高,单台服务器可支持上万并发用户。

    6 引用 • 7 回帖 • 103 关注
  • 旅游

    希望你我能在旅途中找到人生的下一站。

    95 引用 • 901 回帖
  • 黑曜石

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

    A second brain, for you, forever.

    22 引用 • 214 回帖
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    210 引用 • 2040 回帖 • 1 关注
  • OAuth

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

    36 引用 • 103 回帖 • 30 关注
  • TensorFlow

    TensorFlow 是一个采用数据流图(data flow graphs),用于数值计算的开源软件库。节点(Nodes)在图中表示数学操作,图中的线(edges)则表示在节点间相互联系的多维数据数组,即张量(tensor)。

    20 引用 • 19 回帖
  • 京东

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

    14 引用 • 102 回帖 • 316 关注
  • 小说

    小说是以刻画人物形象为中心,通过完整的故事情节和环境描写来反映社会生活的文学体裁。

    31 引用 • 108 回帖
  • Kubernetes

    Kubernetes 是 Google 开源的一个容器编排引擎,它支持自动化部署、大规模可伸缩、应用容器化管理。

    116 引用 • 54 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 161 关注
  • 负能量

    上帝为你关上了一扇门,然后就去睡觉了....努力不一定能成功,但不努力一定很轻松 (° ー °〃)

    89 引用 • 1249 回帖 • 409 关注
  • Flume

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

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

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

    16 引用 • 6 回帖 • 84 关注
  • OneNote
    1 引用 • 3 回帖 • 2 关注
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 553 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    173 引用 • 3849 回帖 • 2 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 629 关注