web前端开发技术课堂笔记 01
1.怎么打开生成的代码
新建一个记事本,扩展名改为html(htm和html一样，没有本质区别),右击打开，将代码复制进去，双击后
2.输出一个静态网页，能实时显示系统时间，格式包含：年月日时分秒，用Javascript实现时间实时
1.生成代码
<!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;
}
/* 时间文本样式 */
#current-time {
font-size: 3rem;
color: #1a73e8;
font-weight: bold;
letter-spacing: 2px;
}
/* 响应式适配 */
@media (max-width: 600px) {
#current-time {
font-size: 2rem;
}
.time-container {
padding: 20px 30px;
}
}
</style>
</head>
<body>
<div class="time-container">
<div id="current-time"></div>
</div>
<script>
// 获取显示时间的DOM元素
const timeElement = document.getElementById('current-time');
// 格式化时间函数：补零操作（确保个位数显示为两位，如 9 → 09）
function formatNumber(num) {
return num.toString().padStart(2, '0');
}
// 更新时间的核心函数
function updateTime() {
// 获取当前系统时间
const now = new Date();
// 提取年月日时分秒
const year = now.getFullYear(); // 年（4位）
const month = formatNumber(now.getMonth() + 1); // 月（注意月份从0开始，需+1）
const day = formatNumber(now.getDate()); // 日
const hour = formatNumber(now.getHours()); // 时
const minute = formatNumber(now.getMinutes()); // 分
const second = formatNumber(now.getSeconds()); // 秒
// 拼接成指定格式的时间字符串
const timeStr = `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
// 将时间显示到页面上
timeElement.textContent = timeStr;
}
// 初始化：立即执行一次，避免页面加载后有延迟
updateTime();
// 设置定时器：每1000毫秒（1秒）更新一次时间，实现实时效果
setInterval(updateTime, 1000);
</script>
</body>
</html>
2.创建项目
1.打开HBuilder，在文件中选择“新建”，点击“web项目”
创建一个名为“class01”的新项目，在项目管理器中，显示为
右击“class01”选择文件所在位置,显示
3.右击“class01”，选择“html”,将代码复制进去
在“css”（css表示页面整体样式）中新建css文件在代码中选择中的代码
/* 页面整体样式 */
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;
}
/* 时间文本样式 */
#current-time {
font-size: 3rem;
color: red;
font-weight: bold;
letter-spacing: 2px;
}
/* 响应式适配 */
@media (max-width: 600px) {
#current-time {
font-size: 2rem;
}
.time-container {
padding: 20px 30px;
}
}
粘贴到css文件中，在主代码中的和中间的代码删除，在原来位置输入（l按两次回车）中添加
<link rel="stylesheet" type="text/css" href="css/style.css"/>
在“js”（）中新建js文件在代码中选择中间的代码
// 获取显示时间的DOM元素
const timeElement = document.getElementById('current-time');
// 格式化时间函数：补零操作（确保个位数显示为两位，如 9 → 09）
function formatNumber(num) {
return num.toString().padStart(2, '0');
}
// 更新时间的核心函数
function updateTime() {
// 获取当前系统时间
const now = new Date();
// 提取年月日时分秒
const year = now.getFullYear(); // 年（4位）
const month = formatNumber(now.getMonth() + 1); // 月（注意月份从0开始，需+1）
const day = formatNumber(now.getDate()); // 日
const hour = formatNumber(now.getHours()); // 时
const minute = formatNumber(now.getMinutes()); // 分
const second = formatNumber(now.getSeconds()); // 秒
// 拼接成指定格式的时间字符串
const timeStr = `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
// 将时间显示到页面上
timeElement.textContent = timeStr;
}
// 初始化：立即执行一次，避免页面加载后有延迟
updateTime();
// 设置定时器：每1000毫秒（1秒）更新一次时间，实现实时效果
setInterval(updateTime, 1000);
粘贴到js文件中，在原代码中和中间的代码的删除，在原来位置中添加
<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
4.运行
在主代码页面，按ctrl+R快捷键运行。
浙公网安备 33010602011771号