求助一个挂件

用时间模板做出来的计时功能,在第二天就不会自动变了。有高手可以写一个计时挂件吗(样式美观什么的都不用,有文字就行)。像这样。

今天是 2022-04-21,从 2022.01.01 入职已经过去 112 天,今年已过了 113 天(第 17 周/共 53 周),距离 2023 年还有 252 天。

欢迎来到这里!

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

注册 关于
请输入回帖内容 ...
  • shuoying
    捐赠者 订阅者

    插入一个 HTML 块即可

    今天是 2022-04-24,从 2020.01.01 入职已经过去 845 天,今年已过了 114 天(第 18 周/共 53 周),距离 2023 年还有 250 天。

    <div>
        <span id="content"></span>
        <script>
            {
                /* 自定义 ID */
                const CUSTOM_ID = "495EB80FD306470E8C2CADA3E0FE05E7";
                function This(customID) {
                    let protyle = document.querySelector(`protyle-html[data-content*="${customID}"]`);
                    if (protyle) {
                        let block = protyle.parentElement.parentElement;
                        return {
                            id: block.dataset.nodeId,
                            block: block,
                            shadowRoot: protyle.shadowRoot,
                        };
                    } else return null;
                }
    
                /**
                 * 格式化日期时间
                 * REF [js怎么格式化日期 - 知乎](https://zhuanlan.zhihu.com/p/136943284)
                 */
                Date.prototype.format = function (fmt) {
                    var o = {
                        "M+": this.getMonth() + 1, //月份
                        "d+": this.getDate(), //日
                        "h+": this.getHours(), //小时
                        "m+": this.getMinutes(), //分
                        "s+": this.getSeconds(), //秒
                        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
                        "S": this.getMilliseconds() //毫秒
                    };
                    if (/(y+)/.test(fmt)) {
                        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
                    }
                    for (var k in o) {
                        if (new RegExp("(" + k + ")").test(fmt)) {
                            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                        }
                    }
                    return fmt;
                }
    
                function week(y, m, d) {
                    let today = new Date(); // 今天
                    let begin = new Date(y, m - 1, d); // 开始日期
                    let this_year = new Date(today.getFullYear(), 0, 1); // 当年第一天
                    let next_year = new Date(today.getFullYear() + 1, 0, 1); // 下一年第一天
                    let d_begin = Math.round((today.valueOf() - begin.valueOf()) / 24 / 3600 / 1000);
                    let d_this_year = Math.round((today.valueOf() - this_year.valueOf()) / 24 / 3600 / 1000);
                    let d_all = Math.round((next_year.valueOf() - this_year.valueOf()) / 24 / 3600 / 1000) - 1;
                    let week_this_year = Math.floor((d_this_year + this_year.getDay()) / 7) + 1;
                    let week_all = Math.floor((d_all + this_year.getDay()) / 7) + 1;
                    return `今天是 ${today.format('yyyy-MM-dd')},从 ${begin.format('yyyy.MM.dd')} 入职已经过去 ${d_begin} 天,今年已过了 ${d_this_year} 天(第 ${week_this_year} 周/共 ${week_all} 周),距离 ${next_year.getFullYear()} 年还有 ${d_all - d_this_year} 天。`
                }
    
                const THIS = This(CUSTOM_ID);
                const root = THIS.shadowRoot;
                const content = root.getElementById("content");
                content.innerHTML = week(2020, 1, 1);
            }
        </script>
    </div>ar() + 1, 0, 1); // 下一年第一天
                    let d_begin = Math.round((today.valueOf() - begin.valueOf()) / 24 / 3600 / 1000);
                    let d_this_year = Math.round((today.valueOf() - this_year.valueOf()) / 24 / 3600 / 1000);
                    let d_all = Math.round((next_year.valueOf() - this_year.valueOf()) / 24 / 3600 / 1000) - 1;
                    let week_this_year = Math.floor((d_this_year + this_year.getDay()) / 7) + 1;
                    let week_all = Math.floor((d_all + this_year.getDay()) / 7) + 1;
                    return `今天是 ${today.format('yyyy-MM-dd')},从 ${begin.format('yyyy.MM.dd')} 入职已经过去 ${d_begin} 天,今年已过了 ${d_this_year} 天(第 ${week_this_year} 周/共 ${week_all} 周),距离 ${next_year.getFullYear()} 年还有 ${d_all - d_this_year} 天。`
                }
    
                const THIS = This(CUSTOM_ID);
                const root = THIS.shadowRoot;
                const content = root.getElementById("content");
                content.innerHTML = week(2020, 1, 1);
            }
        </script>
    </div>
    
    1 回复
    1 操作
    shuoying 在 2022-04-29 19:08:11 更新了该回帖
  • 其他回帖
  • jipeng
    捐赠者 支持者 订阅者 作者

    感谢

  • Syngo
    订阅者

    可以参照集市中 Achuan-2 的 Clock-Pac 挂件自己做。有疑问的地方使用搜索引擎,基本能解决。

推荐标签 标签

  • Linux

    Linux 是一套免费使用和自由传播的类 Unix 操作系统,是一个基于 POSIX 和 Unix 的多用户、多任务、支持多线程和多 CPU 的操作系统。它能运行主要的 Unix 工具软件、应用程序和网络协议,并支持 32 位和 64 位硬件。Linux 继承了 Unix 以网络为核心的设计思想,是一个性能稳定的多用户网络操作系统。

    866 引用 • 921 回帖 • 93 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    84 引用 • 366 回帖 • 1 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    137 引用 • 255 回帖 • 1 关注
  • Node.js

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

    135 引用 • 267 回帖 • 433 关注
  • OkHttp

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

    16 引用 • 6 回帖 • 20 关注
  • OAuth

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

    34 引用 • 103 回帖 • 10 关注
  • Ant-Design

    Ant Design 是服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。

    17 引用 • 23 回帖 • 3 关注
  • 黑曜石

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

    A second brain, for you, forever.

    6 引用 • 23 回帖 • 1 关注
  • JRebel

    JRebel 是一款 Java 虚拟机插件,它使得 Java 程序员能在不进行重部署的情况下,即时看到代码的改变对一个应用程序带来的影响。

    26 引用 • 77 回帖 • 555 关注
  • FreeMarker

    FreeMarker 是一款好用且功能强大的 Java 模版引擎。

    23 引用 • 19 回帖 • 386 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    47 引用 • 206 回帖 • 531 关注
  • 书籍

    宋真宗赵恒曾经说过:“书中自有黄金屋,书中自有颜如玉。”

    73 引用 • 379 回帖
  • 反馈

    Communication channel for makers and users.

    113 引用 • 874 回帖 • 115 关注
  • 程序员

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

    498 引用 • 3597 回帖
  • Windows

    Microsoft Windows 是美国微软公司研发的一套操作系统,它问世于 1985 年,起初仅仅是 Microsoft-DOS 模拟环境,后续的系统版本由于微软不断的更新升级,不但易用,也慢慢的成为家家户户人们最喜爱的操作系统。

    190 引用 • 452 回帖
  • etcd

    etcd 是一个分布式、高可用的 key-value 数据存储,专门用于在分布式系统中保存关键数据。

    5 引用 • 26 回帖 • 468 关注
  • jsoup

    jsoup 是一款 Java 的 HTML 解析器,可直接解析某个 URL 地址、HTML 文本内容。它提供了一套非常省力的 API,可通过 DOM,CSS 以及类似于 jQuery 的操作方法来取出和操作数据。

    6 引用 • 1 回帖 • 364 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 585 关注
  • Scala

    Scala 是一门多范式的编程语言,集成面向对象编程和函数式编程的各种特性。

    13 引用 • 11 回帖 • 50 关注
  • RabbitMQ

    RabbitMQ 是一个开源的 AMQP 实现,服务器端用 Erlang 语言编写,支持多种语言客户端,如:Python、Ruby、.NET、Java、C、PHP、ActionScript 等。用于在分布式系统中存储转发消息,在易用性、扩展性、高可用性等方面表现不俗。

    49 引用 • 60 回帖 • 466 关注
  • CSDN

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

    14 引用 • 155 回帖
  • 音乐

    你听到信仰的声音了么?

    56 引用 • 511 回帖
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 382 回帖 • 3 关注
  • ZeroNet

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

    1 引用 • 21 回帖 • 532 关注
  • 钉钉

    钉钉,专为中国企业打造的免费沟通协同多端平台, 阿里巴巴出品。

    14 引用 • 67 回帖 • 450 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    11 引用 • 52 回帖 • 490 关注
  • 思源笔记

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

    融合块、大纲和双向链接,构建你永恒的数字花园。

    100 引用 • 1027 回帖