笔记

扩展名改成
htm
html（高）
htm html 作用这两个是一样的

ppt pptx 向下兼容 高的能打开低的，反之不行 ctrl+R 预览

记得保存 ：ctrl+s 表头前面会有一个* 这个*消失了就代表保存完毕 ![屏幕截图 2026-03-10 084557](C:\Users\chang\Pictures\Screenshots\屏幕截图 2026-03-10 084557.png)

输出一个静态网页，能实时显示系统时间，格式包含：年月日时分秒，用Javascript实现时间实时

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实时系统时间显示</title>
    <style>
        /* 页面整体样式 */
        body {
            font-family: "Microsoft YaHei", Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f2f5;
        }

        /* 时间显示容器 */
        .time-container {
            background-color: #ffffff;
            padding: 40px 60px;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        /* 时间标题 */
        .time-title {
            color: #333333;
            font-size: 24px;
            margin-bottom: 20px;
            font-weight: 500;
        }

        /* 时间显示样式 */
        #current-time {
            font-size: 48px;
            color: #165DFF;
            font-weight: bold;
            letter-spacing: 2px;
        }
    </style>
</head>
<body>
    <div class="time-container">
        <div class="time-title">当前系统时间</div>
        <div id="current-time"></div>
    </div>

    <script>
        // 获取显示时间的DOM元素
        const timeElement = document.getElementById('current-time');

        // 格式化时间函数：补零（比如把 9 变成 09）
        function padZero(num) {
            return num < 10 ? '0' + num : num;
        }

        // 更新时间的核心函数
        function updateTime() {
            // 获取当前系统时间
            const now = new Date();
            
            // 提取年月日时分秒
            const year = now.getFullYear(); // 年（4位）
            const month = padZero(now.getMonth() + 1); // 月（注意月份从0开始，需+1）
            const day = padZero(now.getDate()); // 日
            const hour = padZero(now.getHours()); // 时
            const minute = padZero(now.getMinutes()); // 分
            const second = padZero(now.getSeconds()); // 秒

            // 拼接成指定格式：年月日 时分秒
            const timeStr = `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
            
            // 更新页面显示
            timeElement.textContent = timeStr;
        }

        // 1. 页面加载时立即执行一次，避免初始空白
        updateTime();

        // 2. 设置定时器，每1000毫秒（1秒）更新一次时间
        setInterval(updateTime, 1000);
    </script>
</body>
</html>

  • 保存后直接用浏览器打开 .html 文件

  • 或在编辑器中右键选择「在浏览器中打开」

    ![屏幕截图 2026-03-10 093840](C:\Users\chang\Pictures\Screenshots\屏幕截图 2026-03-10 093840.png)

  1. 打开 HBuilder，右键点击你的项目文件夹→ 新建 → 文件夹，命名为 css 。

  2. 同理，再新建一个文件夹，命名为 js 。

  3. 右键点击 css 文件夹 → 新建 → CSS 文件，命名为 style.css

  4. 右键点击 js 文件夹 → 新建 → JavaScript 文件，命名为 js.js

  5. 确保你的主页面是 showTime.html （若没有，右键项目 → 新建 → HTML 文件，命名为 showTime.html ）

posted @ 2026-03-10 22:56  i-hx  阅读(5)  评论(0)    收藏  举报