[js] 顶栏倒计时

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

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

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

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

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

    26315 引用 • 109397 回帖 • 1 关注
  • 代码片段

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

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

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

相关帖子

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • HugZephyr 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 回复
  • HugZephyr 1 评论 via Android

    要不设置成明天?

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

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

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

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

    image.png

    这个地方。

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

    1 回复
  • Floria233

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

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

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

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

    image.png

  • GloR

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

请输入回帖内容 ...
JeffreyChen
思源笔记同步教程:https://ld246.com/article/1692089679062 爱发电:https://afdian.com/a/JeffreyChen

推荐标签 标签

  • ReactiveX

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

    1 引用 • 2 回帖 • 178 关注
  • CongSec

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

    1 引用 • 1 回帖 • 37 关注
  • 七牛云

    七牛云是国内领先的企业级公有云服务商,致力于打造以数据为核心的场景化 PaaS 服务。围绕富媒体场景,七牛先后推出了对象存储,融合 CDN 加速,数据通用处理,内容反垃圾服务,以及直播云服务等。

    29 引用 • 230 回帖 • 122 关注
  • Excel
    31 引用 • 28 回帖 • 1 关注
  • Thymeleaf

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

    11 引用 • 19 回帖 • 394 关注
  • CloudFoundry

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

    4 引用 • 16 回帖 • 195 关注
  • 程序员

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

    591 引用 • 3528 回帖
  • SQLite

    SQLite 是一个进程内的库,实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是全世界使用最为广泛的数据库引擎。

    4 引用 • 7 回帖
  • SMTP

    SMTP(Simple Mail Transfer Protocol)即简单邮件传输协议,它是一组用于由源地址到目的地址传送邮件的规则,由它来控制信件的中转方式。SMTP 协议属于 TCP/IP 协议簇,它帮助每台计算机在发送或中转信件时找到下一个目的地。

    4 引用 • 18 回帖 • 636 关注
  • Jenkins

    Jenkins 是一套开源的持续集成工具。它提供了非常丰富的插件,让构建、部署、自动化集成项目变得简单易用。

    54 引用 • 37 回帖
  • PostgreSQL

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

    22 引用 • 22 回帖 • 2 关注
  • Eclipse

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

    76 引用 • 258 回帖 • 624 关注
  • Ubuntu

    Ubuntu(友帮拓、优般图、乌班图)是一个以桌面应用为主的 Linux 操作系统,其名称来自非洲南部祖鲁语或豪萨语的“ubuntu”一词,意思是“人性”、“我的存在是因为大家的存在”,是非洲传统的一种价值观,类似华人社会的“仁爱”思想。Ubuntu 的目标在于为一般用户提供一个最新的、同时又相当稳定的主要由自由软件构建而成的操作系统。

    127 引用 • 169 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖
  • flomo

    flomo 是新一代 「卡片笔记」 ,专注在碎片化时代,促进你的记录,帮你积累更多知识资产。

    6 引用 • 143 回帖
  • Telegram

    Telegram 是一个非盈利性、基于云端的即时消息服务。它提供了支持各大操作系统平台的开源的客户端,也提供了很多强大的 APIs 给开发者创建自己的客户端和机器人。

    5 引用 • 35 回帖
  • 阿里云

    阿里云是阿里巴巴集团旗下公司,是全球领先的云计算及人工智能科技公司。提供云服务器、云数据库、云安全等云计算服务,以及大数据、人工智能服务、精准定制基于场景的行业解决方案。

    85 引用 • 324 回帖 • 1 关注
  • 服务器

    服务器,也称伺服器,是提供计算服务的设备。由于服务器需要响应服务请求,并进行处理,因此一般来说服务器应具备承担服务并且保障服务的能力。

    125 引用 • 585 回帖
  • 链滴

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

    记录生活,连接点滴

    182 引用 • 3882 回帖
  • Java

    Java 是一种可以撰写跨平台应用软件的面向对象的程序设计语言,是由 Sun Microsystems 公司于 1995 年 5 月推出的。Java 技术具有卓越的通用性、高效性、平台移植性和安全性。

    3201 引用 • 8217 回帖
  • Flutter

    Flutter 是谷歌的移动 UI 框架,可以快速在 iOS 和 Android 上构建高质量的原生用户界面。 Flutter 可以与现有的代码一起工作,它正在被越来越多的开发者和组织使用,并且 Flutter 是完全免费、开源的。

    39 引用 • 92 回帖 • 9 关注
  • uTools

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

    7 引用 • 28 回帖
  • 笔记

    好记性不如烂笔头。

    311 引用 • 794 回帖
  • Kubernetes

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

    118 引用 • 54 回帖 • 5 关注
  • TensorFlow

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

    20 引用 • 19 回帖 • 2 关注
  • OpenCV
    15 引用 • 36 回帖
  • 小说

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

    32 引用 • 108 回帖