如何显示系统时间

一、打开Hbuilder创建Web文件

①点击左上角文件创建Web文件

屏幕截图 2026-03-10 091716

②命名项目名称

二、创建html文件

①点击刚创建的web文件，创建Html文件

屏幕截图 2026-03-10 093958

②将代码完成后保存

显示系统时间代码如下：

<!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>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }

        body {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
        }

        .time-box {
            padding: 30px 50px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            text-align: center;
        }

        #date {
            font-size: 20px;
            color: #666;
            margin-bottom: 10px;
        }

        #time {
            font-size: 36px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>

    <div class="time-box">
        <div id="date"></div>
        <div id="time"></div>
    </div>

    <script>
        // 星期中文
        const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

        function updateTime() {
            const now = new Date();

            // 年月日
            const year = now.getFullYear();
            const month = String(now.getMonth() + 1).padStart(2, '0');
            const day = String(now.getDate()).padStart(2, '0');

            // 时分秒
            const hours = String(now.getHours()).padStart(2, '0');
            const minutes = String(now.getMinutes()).padStart(2, '0');
            const seconds = String(now.getSeconds()).padStart(2, '0');

            const dayName = week[now.getDay()];

            // 拼接显示
            document.getElementById('date').innerText = `${year}-${month}-${day} ${dayName}`;
            document.getElementById('time').innerText = `${hours}:${minutes}:${seconds}`;
        }

        // 立即执行一次
        updateTime();
        // 每秒刷新
        setInterval(updateTime, 1000);
    </script>

</body>
</html>

css、javascript、html三者在页面中的作用

css的作用：美化页面

javascript的作用：页面交互

html的作用：框架结构

posted @ 2026-03-10 10:24  程薇梦  阅读(7)  评论(1)    收藏  举报