登录 注册

思源笔记 html 运行错误，但在其他平台能正确运行

本人小白，本来是想搞个 html 显示当天距离双十一还有 xx 天，使用 html 块输入代码后(代码贴最后)能够显示文字但倒计时计算结果是 0 天，在其他平台测试了能正确显示还有 189 天。有没有大佬告诉一下是啥问题。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>北京时间双十一倒计时</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #ff0036, #ff003690);
            font-family: "Microsoft Yahei", sans-serif;
        }
    .container {
        background: rgba(255,255,255,0.95);
        padding: 2rem 3rem;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        text-align: center;
    }
    h1 {
        color: #ff0036;
        margin: 0 0 1rem;
        font-size: 2.2em;
    }
    #countdown {
        font-size: 4em;
        color: #ff0036;
        font-weight: bold;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }
    .unit {
        font-size: 1.2em;
        color: #666;
        margin-top: -10px;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>双十一购物狂欢节倒计时</h1>
        <div id="countdown">0</div>
        <div class="unit">天</div>
    </div>
<script>
    function getBeijingDayCount() {
        // 获取当前UTC时间并转换为北京时间（东八区）
        const now = new Date();
        const utcNow = now.getTime() + (now.getTimezoneOffset() * 60000);
        const beijingNow = new Date(utcNow + (3600000 * 8));
        // 创建今年双十一北京时间（11月11日 00:00:00）
        let targetYear = beijingNow.getFullYear();
        let targetDate = Date.UTC(targetYear, 10, 11 - 1, 16); // 转换为UTC时间：11月10日16时（即北京时间11日0时）
        // 如果已过今年双十一，计算明年
        if (beijingNow >= new Date(targetDate + 86400000)) {
            targetDate = Date.UTC(targetYear + 1, 10, 11 - 1, 16);
        }
        // 计算剩余天数（按完整自然日计算）
        const diff = targetDate - beijingNow.getTime();
        return Math.floor(diff / 86400000);
    }
    function updateDisplay() {
        const days = getBeijingDayCount();
        document.getElementById('countdown').textContent = days;
        document.title = `还剩${days}天 - 双十一倒计时`;
    }
    // 初始化并设置定时器
    updateDisplay();
    setInterval(updateDisplay, 60000); // 每分钟更新保证跨日准确
</script>
</body>
</html>
  • 思源笔记

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

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

    26246 引用 • 109094 回帖
  • Q&A

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

    10093 引用 • 45838 回帖 • 66 关注
2 操作
JeffreyChen 在 2025-05-06 00:00:44 更新了该帖
Koyosin7 在 2025-05-05 23:07:28 更新了该帖
潮州 位置
20 悬赏
1 收藏
2 操作
5 回帖
2
246 65 6 39 2 134

相关帖子

被采纳的回答
  • JeffreyChen • • 1
    付费者 支持者 捐赠者

    这东西写起来比较麻烦

    <div>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>北京时间双十一倒计时</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background: linear-gradient(135deg, #ff0036, #ff003690);
            font-family: "Microsoft Yahei", sans-serif;
        }
    .container {
        background: rgba(255,255,255,0.95);
        padding: 2rem 3rem;
        border-radius: 15px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        text-align: center;
    }
    h1 {
        color: #ff0036;
        margin: 0 0 1rem;
        font-size: 2.2em;
    }
    #countdown {
        font-size: 4em;
        color: #ff0036;
        font-weight: bold;
        text-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    }
    .unit {
        font-size: 1.2em;
        color: #666;
        margin-top: -10px;
    }
</style>
</head>
<body>
    <div class="container">
        <h1>双十一购物狂欢节倒计时</h1>
        <div id="countdown">0</div>
        <div class="unit">天</div>
    </div>
<script>
    /* 使用括号划分一下作用域, 避免函数的重定义 */
    {
        function getBeijingDayCount() {
            // 获取当前UTC时间并转换为北京时间（东八区）
            const now = new Date();
            const utcNow = now.getTime() + (now.getTimezoneOffset() * 60000);
            const beijingNow = new Date(utcNow + (3600000 * 8));
            // 创建今年双十一北京时间（11月11日 00:00:00）
            let targetYear = beijingNow.getFullYear();
            let targetDate = Date.UTC(targetYear, 10, 11 - 1, 16); // 转换为UTC时间：11月10日16时（即北京时间11日0时）
            // 如果已过今年双十一，计算明年
            if (beijingNow >= new Date(targetDate + 86400000)) {
                targetDate = Date.UTC(targetYear + 1, 10, 11 - 1, 16);
            }
            // 计算剩余天数（按完整自然日计算）
            const diff = targetDate - beijingNow.getTime();
            return Math.floor(diff / 86400000);
        }
        function updateDisplay() {
            const days = getBeijingDayCount();
            THIS.shadowRoot.getElementById('countdown').textContent = days;
        }
        const CUSTOM_ID = "E5C1EC9E30C14616A3569570281D2800";
        /**
         * HTML 块中的脚本获取当前块相关信息
         * @params {string} customID 内部定义的 ID
         * @returns {string} id 当前 HTML 块 ID
         * @returns {HTMLElement} block 当前 HTML 块
         * @returns {HTMLElement} shadowRoot 当前 HTML 块 shadowRoot
         */
        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;
        }
        const THIS = This(CUSTOM_ID);
        if (THIS) {
            // 初始化并设置定时器
            updateDisplay();
            setInterval(updateDisplay, 60000); // 每分钟更新保证跨日准确
        } else {
            console.error("Failed to find the current HTML block.");
        }
    }
</script>
</body>
</div>

    效果：

    image.png

    参考了： [思源笔记经验分享] HTML 块中获得自身的 DOM 节点

5 回帖
思源笔记 html 运行错误，但在其他平台能正确运行

欢迎来到这里！

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

注册 关于
请输入回帖内容 ...
Koyosin7
潮州
回帖
2
 帖子
1
 积分
503

近期热议

推荐标签 标签

  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库，强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery，是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 735 关注
  • 黑曜石

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

    A second brain, for you, forever.

    24 引用 • 246 回帖
  • gRpc
    11 引用 • 9 回帖 • 100 关注
  • Android

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

    336 引用 • 324 回帖
  • OpenShift

    红帽提供的 PaaS 云，支持多种编程语言，为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 662 关注
  • GitLab

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

    46 引用 • 72 回帖
  • Hibernate

    Hibernate 是一个开放源代码的对象关系映射框架，它对 JDBC 进行了非常轻量级的对象封装，使得 Java 程序员可以随心所欲的使用对象编程思维来操纵数据库。

    39 引用 • 103 回帖 • 726 关注
  • JRebel

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

    26 引用 • 78 回帖 • 679 关注
  • 招聘

    哪里都缺人，哪里都不缺人。

    188 引用 • 1057 回帖 • 1 关注
  • 书籍

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

    82 引用 • 412 回帖
  • Markdown

    Markdown 是一种轻量级标记语言，用户可使用纯文本编辑器来排版文档，最终通过 Markdown 引擎将文档转换为所需格式（比如 HTML、PDF 等）。

    172 引用 • 1538 回帖
  • 运维

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

    151 引用 • 257 回帖 • 1 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量，事件及实时分析。

    2 引用 • 104 关注
  • Telegram

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

    5 引用 • 35 回帖
  • IDEA

    IDEA 全称 IntelliJ IDEA，是一款 Java 语言开发的集成环境，在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。

    181 引用 • 400 回帖
  • 阿里巴巴

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

    43 引用 • 221 回帖 • 56 关注
  • 996

    “工作 996， 生病 ICU”

    13 引用 • 200 回帖 • 1 关注
  • GraphQL

    GraphQL 是一个用于 API 的查询语言，是一个使用基于类型系统来执行查询的服务端运行时（类型系统由你的数据定义）。GraphQL 并没有和任何特定数据库或者存储引擎绑定，而是依靠你现有的代码和数据支撑。

    4 引用 • 3 回帖 • 8 关注
  • Solidity

    Solidity 是一种智能合约高级语言，运行在 [以太坊] 虚拟机（EVM）之上。它的语法接近于 JavaScript，是一种面向对象的语言。

    3 引用 • 18 回帖 • 443 关注
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合，以模块的方式组织管理插件以
    及相关配置，为不同的语言开发量身定制了相关的开发模块，该模块提供代码自动补全，
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 112 关注
  • 链书

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

    链书社

    链书目前已经下线，也许以后还有计划重制上线。

    14 引用 • 257 回帖 • 1 关注
  • C

    C 语言是一门通用计算机编程语言，应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    86 引用 • 165 回帖 • 1 关注
  • 音乐

    你听到信仰的声音了么？

    62 引用 • 512 回帖
  • Flume

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

    9 引用 • 6 回帖 • 661 关注
  • Postman

    Postman 是一款简单好用的 HTTP API 调试工具。

    4 引用 • 3 回帖 • 1 关注
  • Anytype
    3 引用 • 31 回帖 • 27 关注
  • 程序员

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

    591 引用 • 3528 回帖

最新标签