[js] 顶栏倒计时

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

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

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

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

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

    28442 引用 • 119759 回帖
  • 代码片段

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

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

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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
请输入回帖内容 ...
JeffreyChen
目前作为思源笔记的半个客服、测试、开发、评审,在爱发电接受捐赠:https://afdian.com/a/JeffreyChen

推荐标签 标签

  • Chrome

    Chrome 又称 Google 浏览器,是一个由谷歌公司开发的网页浏览器。该浏览器是基于其他开源软件所编写,包括 WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

    63 引用 • 289 回帖 • 1 关注
  • JWT

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

    20 引用 • 15 回帖 • 27 关注
  • 阿里巴巴

    阿里巴巴网络技术有限公司(简称:阿里巴巴集团)是以曾担任英语教师的马云为首的 18 人,于 1999 年在中国杭州创立,他们相信互联网能够创造公平的竞争环境,让小企业通过创新与科技扩展业务,并在参与国内或全球市场竞争时处于更有利的位置。

    43 引用 • 221 回帖 • 11 关注
  • DNSPod

    DNSPod 建立于 2006 年 3 月份,是一款免费智能 DNS 产品。 DNSPod 可以为同时有电信、网通、教育网服务器的网站提供智能的解析,让电信用户访问电信的服务器,网通的用户访问网通的服务器,教育网的用户访问教育网的服务器,达到互联互通的效果。

    6 引用 • 26 回帖 • 548 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 838 关注
  • 微信

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

    135 引用 • 798 回帖 • 2 关注
  • 游戏

    沉迷游戏伤身,强撸灰飞烟灭。

    188 引用 • 833 回帖 • 2 关注
  • Mac

    Mac 是苹果公司自 1984 年起以“Macintosh”开始开发的个人消费型计算机,如:iMac、Mac mini、Macbook Air、Macbook Pro、Macbook、Mac Pro 等计算机。

    168 引用 • 598 回帖
  • CodeMirror
    2 引用 • 17 回帖 • 197 关注
  • 链滴

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

    记录生活,连接点滴

    203 引用 • 4024 回帖
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • SSL

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

    70 引用 • 193 回帖 • 404 关注
  • webpack

    webpack 是一个用于前端开发的模块加载器和打包工具,它能把各种资源,例如 JS、CSS(less/sass)、图片等都作为模块来使用和处理。

    43 引用 • 130 回帖 • 259 关注
  • MySQL

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

    695 引用 • 538 回帖 • 2 关注
  • Outlook
    1 引用 • 5 回帖 • 1 关注
  • CSS

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

    200 引用 • 545 回帖
  • Visio
    1 引用 • 2 回帖
  • Ngui

    Ngui 是一个 GUI 的排版显示引擎和跨平台的 GUI 应用程序开发框架,基于
    Node.js / OpenGL。目标是在此基础上开发 GUI 应用程序可拥有开发 WEB 应用般简单与速度同时兼顾 Native 应用程序的性能与体验。

    7 引用 • 9 回帖 • 430 关注
  • 程序员

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

    599 引用 • 3541 回帖
  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 429 关注
  • TGIF

    Thank God It's Friday! 感谢老天,总算到星期五啦!

    293 引用 • 4496 回帖 • 688 关注
  • JetBrains

    JetBrains 是一家捷克的软件开发公司,该公司位于捷克的布拉格,并在俄国的圣彼得堡及美国麻州波士顿都设有办公室,该公司最为人所熟知的产品是 Java 编程语言开发撰写时所用的集成开发环境:IntelliJ IDEA

    18 引用 • 54 回帖
  • OkHttp

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

    16 引用 • 6 回帖 • 99 关注
  • Folo

    Folo 是一个 RSS 阅读和信息聚合应用,整合多种内容源到统一时间线。

    项目地址:https://github.com/RSSNext/Folo

    1 引用 • 3 回帖 • 2 关注
  • GitLab

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

    46 引用 • 72 回帖
  • 链书

    链书(Chainbook)是 B3log 开源社区提供的区块链纸质书交易平台,通过 B3T 实现共享激励与价值链。可将你的闲置书籍上架到链书,我们共同构建这个全新的交易平台,让闲置书籍继续发挥它的价值。

    链书社

    链书目前已经下线,也许以后还有机会重制。

    14 引用 • 258 回帖
  • SQLServer

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

    21 引用 • 31 回帖 • 1 关注