零基础如何用HTML+JavaScript实现母亲节时段化问候网站？

别慌！这个需求其实非常容易实现，完全来得及给妈妈准备这份小惊喜～ 下面我会给你完整的可直接运行代码，再逐部分解释，哪怕没接触过JavaScript也能轻松上手。

核心思路 #

• 用JavaScript获取当前时间的小时数（24小时制）
• 根据不同小时区间匹配对应的母亲节专属问候语
• 把问候语动态插入到HTML页面中显示

完整可直接使用的代码 #

复制下面的代码到记事本，保存为motherday.html（注意后缀是.html不是.txt），双击就能在浏览器打开：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>❤️ 母亲节快乐 ❤️</title>
    <style>
        /* 简单的温馨样式，不用改也能用 */
        body {
            font-family: '微软雅黑', sans-serif;
            background-color: #f8e8ef;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            padding: 20px;
            text-align: center;
        }
        h1 {
            color: #d83a56;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }
        .greeting {
            font-size: 1.8rem;
            color: #333;
            background-color: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <h1>❤️ 母亲节快乐 ❤️</h1>
    <!-- 用来显示问候语的盒子 -->
    <div class="greeting" id="greetingBox"></div>

    <script>
        // 获取当前时间的小时数（0-23）
        const currentHour = new Date().getHours();
        let greetingText = "";

        // 根据时段匹配问候语，你可以随意修改内容
        if (currentHour >= 0 && currentHour < 7) {
            greetingText = "嘿！现在还早，别起床！好好睡个懒觉吧～";
        } else if (currentHour >= 7 && currentHour < 12) {
            greetingText = "早上好！放松点，今天是母亲节，祝你过得愉快！";
        } else if (currentHour >= 12 && currentHour < 18) {
            greetingText = "下午好呀妈妈！今天就把家务全丢开，好好享受属于你的一天～";
        } else {
            greetingText = "晚安啦！今天过得开心吗？愿你拥有甜甜的美梦❤️";
        }

        // 把问候语插入到页面的盒子里
        document.getElementById("greetingBox").textContent = greetingText;
    </script>
</body>
</html>

新手友好的代码解释 #

HTML部分 #

• 最基础的页面结构，包含一个节日标题和一个空盒子（id="greetingBox"），专门用来放动态问候语

CSS部分 #

• 简单的美化：粉色背景、白色卡片、温馨字体，让页面看起来更有心意，赶时间的话可以直接忽略这部分

JavaScript部分 #

• new Date().getHours()：这行代码会自动获取当前的小时数（比如凌晨3点是3，下午5点是17）
• if-else判断：根据小时区间给greetingText赋值对应的问候语，你可以随时修改这些文字内容
• document.getElementById("greetingBox").textContent = greetingText：把准备好的问候语放到页面的空盒子里，实现动态显示

快速上手步骤 #

1. 复制上面的代码到记事本
2. 点击「文件-另存为」，文件名填motherday.html，保存类型选「所有文件」
3. 双击这个HTML文件，就能在浏览器里看到效果了
4. 如果想给妈妈看，直接把这个文件发给她，或者用微信/QQ分享打开链接就行

内容的提问来源于stack exchange，提问作者JSP