当前位置：首页 > news >正文

时间模块 demo

news 2025/8/20 7:27:51

文章目录

- 需求
- 分析

需求

做一个时间查看器，显示当前时间
在这里插入图片描述

分析

以下是一个使用 HTML、CSS 和 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>body {font-family: 'Arial', sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;margin: 0;}.time-container {text-align: center;background-color: #fff;padding: 40px 60px;border-radius: 15px;box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);}.date-week {font-size: 8em; /* 增大的字体 */color: #333;margin-bottom: 28px;}.time {font-size: 16em; /* 更大的字体 */color: #333;font-weight: bold;animation: blink 1s infinite;}@keyframes blink {0%, 100% { opacity: 1; }50% { opacity: 0.8; }}/* 响应式调整 */@media (max-width: 768px) {.date-week {font-size: 3em;}.time {font-size: 6em;}}@media (max-width: 480px) {.date-week {font-size: 2em;}.time {font-size: 4em;}.time-container {padding: 20px 30px;}}</style>
</head>
<body><div class="time-container"><div class="date-week" id="dateWeek"></div><div class="time" id="time"></div></div><script>function updateTime() {const now = new Date();// 设置时区为北京时间 (UTC+8)const offset = 8 * 60; // 北京时间的偏移量（分钟）const utc = now.getTime() + (now.getTimezoneOffset() * 60000);const beijingTime = new Date(utc + (offset * 60000));// 获取日期和星期const year = beijingTime.getFullYear();const month = String(beijingTime.getMonth() + 1).padStart(2, '0'); // 月份从0开始const day = String(beijingTime.getDate()).padStart(2, '0');const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];const weekDay = weekDays[beijingTime.getDay()];// 获取时间const hours = String(beijingTime.getHours()).padStart(2, '0');const minutes = String(beijingTime.getMinutes()).padStart(2, '0');const seconds = String(beijingTime.getSeconds()).padStart(2, '0');// 显示日期和星期document.getElementById('dateWeek').textContent = `${year}年${month}月${day}日 ${weekDay}`;// 显示时间document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`;}// 初始加载时显示时间updateTime();// 每秒更新一次时间setInterval(updateTime, 1000);</script>
</body>
</html>