显示实时时间
1
创建HTML文件
2用豆包生成
输出一个静态网页，能实时显示系统时间，格式包含：年月日时分秒，用Javascript实现时间实时
3
<!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 {font-size: 48px;color: #1a73e8;padding: 20px 40px;background-color: white;border-radius: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);letter-spacing: 2px;}</style>
</head>
<body><!-- 用于显示时间的容器 --><div class="time-container" id="currentTime"></div><script>// 获取显示时间的DOM元素const timeElement = document.getElementById('currentTime');// 定义格式化时间的函数function formatDateTime() {// 获取当前系统时间const now = new Date();// 提取年、月、日、时、分、秒，并补零（确保个位数时显示两位，如 9秒显示为09秒）const year = now.getFullYear();const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以+1const day = String(now.getDate()).padStart(2, '0');const hour = String(now.getHours()).padStart(2, '0');const minute = String(now.getMinutes()).padStart(2, '0');const second = String(now.getSeconds()).padStart(2, '0');// 拼接成指定格式：年-月-日 时:分:秒return `${year}-${month}-${day} ${hour}:${minute}:${second}`;}// 定义更新时间的函数function updateTime() {// 将格式化后的时间赋值给DOM元素timeElement.textContent = formatDateTime();}// 页面加载时立即执行一次，避免初始空白updateTime();// 设置定时器，每1000毫秒（1秒）更新一次时间setInterval(updateTime, 1000);</script>
</body>
</html>
4 创建css文件
把HTML文件中style剪切出来
5 HTML中输入
<link rel="stylesheet" type="text/css" href="css/style.css"/>
6
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>实时系统时间显示</title><link rel="stylesheet" type="text/css" href="css/style.css"/></head>
<body><!-- 用于显示时间的容器 --><div class="time-container" id="currentTime"></div><script>// 获取显示时间的DOM元素const timeElement = document.getElementById('currentTime');// 定义格式化时间的函数function formatDateTime() {// 获取当前系统时间const now = new Date();// 提取年、月、日、时、分、秒，并补零（确保个位数时显示两位，如 9秒显示为09秒）const year = now.getFullYear();const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以+1const day = String(now.getDate()).padStart(2, '0');const hour = String(now.getHours()).padStart(2, '0');const minute = String(now.getMinutes()).padStart(2, '0');const second = String(now.getSeconds()).padStart(2, '0');// 拼接成指定格式：年-月-日 时:分:秒return `${year}-${month}-${day} ${hour}:${minute}:${second}`;}// 定义更新时间的函数function updateTime() {// 将格式化后的时间赋值给DOM元素timeElement.textContent = formatDateTime();}// 页面加载时立即执行一次，避免初始空白updateTime();// 设置定时器，每1000毫秒（1秒）更新一次时间setInterval(updateTime, 1000);</script>
</body>
</html>