|
Web前端开发技术第二周周二课堂笔记
1.新建项目
文件—>新建—>Web项目，弹出对话框后修改名称及地址，点击完成
2.新建HTML文件
右击刚刚所建的Web项目—>新建—>HTML文件，弹出对话框后修改名称为showTime.html，单击完成
3.输入代码（输出一个静态网页，能实时显示系统时间，格式包含：年月日时分秒，用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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.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 {
font-size: 24px;
color: #333333;
margin-bottom: 20px;
}
.current-time {
font-size: 48px;
color: #165DFF;
font-weight: bold;
letter-spacing: 2px;
}
</style>
</head>
<body>
<div class="time-container">
<h2 class="time-title">当前系统时间</h2>
<div id="timeDisplay" class="current-time"></div>
</div>
<script>
// 获取显示时间的DOM元素
const timeDisplay = document.getElementById('timeDisplay');
// 格式化时间函数：补零操作（确保个位数显示为两位数，如 9 → 09）
function formatNumber(num) {
return num < 10 ? `0${num}` : num;
}
// 更新时间的核心函数
function updateTime() {
// 创建当前时间对象
const now = new Date();
// 提取年月日时分秒
const year = now.getFullYear(); // 年（4位数）
const month = formatNumber(now.getMonth() + 1); // 月（0-11，需+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}`;
// 将时间显示到页面上
timeDisplay.textContent = timeStr;
}
// 1. 页面加载时立即执行一次，避免初始空白
updateTime();
// 2. 设置定时器，每1000毫秒（1秒）更新一次时间，实现实时效果
setInterval(updateTime, 1000);
</script>
</body>
</html>
4.创建css文件
右击css—>新建—>css文件，弹出对话框后命名为style.css，单击完成
将showTime中的
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.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 {
font-size: 24px;
color: #333333;
margin-bottom: 20px;
}
.current-time {
font-size: 48px;
color: #165DFF;
font-weight: bold;
letter-spacing: 2px;
}
复制并删除，将其复制到刚刚所建的css文件中。
5.在showTime中刚刚删除的地方输入l单击两次回车
输入内容为
<link rel="stylesheet" type="text/css" href="css/style.css"/>
6.将showTime与css文件都保存，保存后在showTime中Ctrl+R运行
7.新建JS文件
右击js—>新建—>javaScirpt文件，弹出对话框后命名，单击完成
8.将showTime中
// 获取显示时间的DOM元素
const timeDisplay = document.getElementById('timeDisplay');
// 格式化时间函数：补零操作（确保个位数显示为两位数，如 9 → 09）
function formatNumber(num) {
return num < 10 ? `0${num}` : num;
}
// 更新时间的核心函数
function updateTime() {
// 创建当前时间对象
const now = new Date();
// 提取年月日时分秒
const year = now.getFullYear(); // 年（4位数）
const month = formatNumber(now.getMonth() + 1); // 月（0-11，需+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}`;
// 将时间显示到页面上
timeDisplay.textContent = timeStr;
}
// 1. 页面加载时立即执行一次，避免初始空白
updateTime();
// 2. 设置定时器，每1000毫秒（1秒）更新一次时间，实现实时效果
setInterval(updateTime, 1000);
复制并删除，将其复制到刚刚所建的js文件中。
9.在showTime中刚刚删除的地方输入s，选中第三个回车再回车
输入内容为
<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
10.将showTime与js文件都保存，保存后回到showTime中Ctrl+R运行
11.将时间字体改为红色
打开style.css，将最后的color改为red。
.current-time {
font-size: 48px;
color: red;
font-weight: bold;
letter-spacing: 2px;
}
12.将showTime与css文件都保存，保存后回到showTime中Ctrl+R运行
来源：https://www.cnblogs.com/0921k/p/19695485 |
發表於 2026-3-10 10:23:00