一、打开Hbuilder创建Web文件
①点击左上角文件创建Web文件
②命名项目名称
二、创建html文件
①点击刚创建的web文件，创建Html文件
②将代码完成后保存
显示系统时间代码如下：
<!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的作用：框架结构