登录注册

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

本贴最后更新于 230 天前，其中的信息可能已经时异事殊

本人小白，本来是想搞个 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>

思源笔记

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

融合块、大纲和双向链接，重构你的思维。
28446 引用 • 119789 回帖
Q&A

提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。
11155 引用 • 50666 回帖 • 52 关注

2 操作

JeffreyChen 在 2025-05-06 00:00:44 更新了该帖

Koyosin7 在 2025-05-05 23:07:28 更新了该帖

Koyosin7 7 个月前潮州位置

20 悬赏

1 收藏

2 操作

5 回帖

309 76 6 52 2 173

相关帖子

被采纳的回答

JeffreyChen • 7 个月前 • 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>

效果：

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

5 回帖

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

欢迎来到这里！

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

注册关于

请输入回帖内容 ...

JeffreyChen • 7 个月前 • 1 • 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>

效果：

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

太牛了大佬

Koyosin7 • 7 个月前

其他回帖
Wetoria • 7 个月前 • 1 评论
订阅者付费者捐赠者恶龙

思源设置，允许运行 html 中的脚本

1 回复

是影子 DOM 的问题

JeffreyChen • 7 个月前
Koyosin7 • 7 个月前
付费者作者

正如楼下所说，不是这问题
daziduan • 6 个月前
捐赠者

@JeffreyChen 请问，我按你的 html 代码设置后，浏览器调试显示“contenteditable="false"”
截图如下：

是哪里出错了？还是我思源笔记哪里设置不正确？

1 回复

1 引用

求助笔记中以“嵌入块”或“chart”等可视化方式显示数据库数据 • daziduan
查看全部回帖

Koyosin7

潮州

回帖

帖子

积分

461

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

相关帖子

申请退款, 找不到退款链接

标记背景底色能修改吗

如何使笔记本折叠后，记忆之前打开的格式，再次打开时恢复

问题反馈：右边侧边栏最小过宽

如何修改鼠标选中时的文本样式?

请问文档树中「笔记本」「子文档」的选择器分别是什么？

思源有类似 sonovel 的插件吗？？

欢迎来到这里！

近期热议

推荐标签标签

最新标签

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

相关帖子

申请退款, 找不到退款链接

标记背景底色能修改吗

如何使笔记本折叠后，记忆之前打开的格式，再次打开时恢复

问题反馈：右边侧边栏最小过宽

如何修改鼠标选中时的文本样式?

请问文档树中「笔记本」「子文档」的选择器分别是什么？

思源有类似 sonovel 的插件吗？？

欢迎来到这里！

近期热议

推荐标签 标签

最新标签

推荐标签标签