摘要：在网页开发中，动态显示当前时间是一项实用的功能。本文将从极简代码入手，逐步展示如何用HTML实现在线时间显示，并通过添加CSS样式和JavaScript功能，使其从简单到精美逐步进化。
一、简易在线时间显示（静态）
这是最基本的实现方式，仅用HTML、CSS和JavaScript实现时间显示。
图示1
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<!-- 此处设置网页编码为UTF-8 -->
<title>简易在线时间</title>
</head>
<body>
<div id="time">正在加载时间...</div>
<!-- 用一个div显示时间 -->
<script>
// 获取当前时间并更新显示
function updateTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 获取年月日和时分秒
const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
document.getElementById('time').textContent = timeString;
// 更新div内容
}
updateTime();
// 初始调用一次
</script>
</body>
</html>
此代码实现了一个非常基础的时间显示功能，但界面较为简单，缺乏美观性。
二、样式美化版（静态）
在此基础上，我们将添加CSS样式，使时间显示更加美观。
图示2
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>样式美化版在线时间</title>
<style>
#time {
font-family: Arial, sans-serif;
font-size: 24px;
color : #333;
text-align: center;
margin-top: 50px;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
/* 设置时间显示样式 */
</style>
</head>
<body>
<div id="time">正在加载时间...</div>
<script>
function updateTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
document.getElementById('time').textContent = timeString;
}
updateTime();
</script>
</body>
</html>
此版本通过CSS为时间显示添加了字体、边框、阴影等样式，使其看起来更加整齐美观。
三、动态效果版
我们再进一步，为时间显示添加一些动态效果，使其更加生动有趣。
图示3
呼吸灯效果。
代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>动态效果版在线时间</title>
<style>
#time {
font-family: 'Courier New', monospace;
font-size: 32px;
color: #fff;
text-align: center;
margin-top: 100px;
padding: 20px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 10px;
animation: pulse 2s infinite;
}
/* 添加动画效果 */
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
}
}
/* 定义脉冲动画 */
</style>
</head>
<body style="background-color: #222;">
<div id="time">正在加载时间...</div>
<script>
function updateTime() {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const hours = now.getHours().toString().padStart(2, '0');
const minutes = now.getMinutes().toString().padStart(2, '0');
const seconds = now.getSeconds().toString().padStart(2, '0');
// 时间格式化
const timeString = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
document.getElementById('time').textContent = timeString;
}
updateTime();
setInterval(updateTime, 1000); // 每秒更新一次
</script>
</body>
</html>
此版本不仅对时间进行了格式化处理（确保数字不足两位时补零），还通过CSS动画为时间显示添加了脉冲效果，使其在深色背景上更加醒目。
四、进阶版：模拟时钟表盘
最后，实现一个更复杂的版本，将时间显示在一个模拟的时钟表盘上。
图示4
代码
<!DOCTYPE html>
<!-- 设置文档语言为中文 -->
<html lang="zh-CN">
<head>
<!-- 设置字符编码为 UTF-8 -->
<meta charset="UTF-8">
<!-- 设置视口，适配不同设备 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 设置页面标题 -->
<title>高级时钟表盘</title>
<style>
/* 全局样式：重置所有元素的外边距、内边距，并设置盒模型为 border-box */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 页面主体样式：使用弹性布局，将内容居中显示，并设置背景颜色和字体 */
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f5f5;
font-family: 'Arial', sans-serif;
}
/* 时钟容器样式：设置相对定位和宽高 */
.clock-container {
position: relative;
width: 300px;
height: 300px;
}
/* 时钟表盘样式：设置相对定位、圆形边框、渐变背景和阴影，并使用弹性布局居中内容 */
.clock-face {
position: relative;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(145deg, #ffffff, #e6e6e6);
box-shadow:
inset 0 0 10px rgba(0, 0, 0, 0.1),
0 0 20px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
}
/* 刻度样式：设置绝对定位，以时钟中心为旋转原点 */
.marker {
position: absolute;
left: 50%;
top: 0px;
transform-origin: 0 150px;
}
/* 小时刻度样式：设置宽度、高度和背景颜色 */
.hour-marker {
width: 3px;
height: 12px;
background-color: #333;
margin-left: -1.5px;
}
/* 分钟刻度样式：设置宽度、高度和背景颜色 */
.minute-marker {
width: 1px;
height: 6px;
background-color: #666;
margin-left: -0.5px;
}
/* 指针样式：设置绝对定位，以底部中心为旋转原点，并设置圆角 */
.hand {
position: absolute;
bottom: 50%;
transform-origin: bottom center;
border-radius: 2px 2px 0 0;
}
/* 时针样式：设置宽度、高度、背景颜色和位置 */
.hour-hand {
width: 6px;
height: 60px;
background-color: #333;
left: 50%;
margin-left: -3px;
}
/* 分针样式：设置宽度、高度、背景颜色和位置 */
.minute-hand {
width: 4px;
height: 85px;
background-color: #555;
left: 50%;
margin-left: -2px;
}
/* 秒针样式：设置宽度、高度、背景颜色和位置 */
.second-hand {
width: 2px;
height: 95px;
background-color: #e74c3c;
left: 50%;
margin-left: -1px;
}
/* 中心点样式：设置宽度、高度、背景颜色和圆角，并设置层级 */
.center-dot {
width: 10px;
height: 10px;
background-color: #333;
border-radius: 50%;
position: absolute;
z-index: 10;
}
/* 品牌标识样式：设置绝对定位、字体大小、颜色和内边距 */
.branding {
position: absolute;
font-size: 12px;
color: #666;
text-align: center;
padding-top: 5px;
}
</style>
</head>
<body>
<!-- 时钟容器元素 -->
<div class="clock-container" id="clock-container"></div>
<script>
// 时钟组件类，用于创建和管理时钟
class Clock {
// 构造函数，接收时钟容器的 ID 并初始化时钟
constructor(containerId) {
this.container = document.getElementById(containerId);
this.initClock();
}
// 初始化时钟的方法，调用创建表盘、刻度、指针的方法，更新时间并启动时钟
initClock() {
this.createClockFace();
this.createMarkers();
this.createHands();
this.updateTime();
this.startClock();
}
// 创建时钟表盘的方法，创建表盘、中心点和品牌标识元素
createClockFace() {
const clockFace = document.createElement('div');
clockFace.className = 'clock-face';
this.container.appendChild(clockFace);
const centerDot = document.createElement('div');
centerDot.className = 'center-dot'; // 添加中心点类名
clockFace.appendChild(centerDot); // 添加中心点元素
const brand = document.createElement('div'); // 创建品牌标识元素
brand.className = 'branding'; // 添加品牌标识类名
brand.textContent = 'PREMIUM WATCH'; // 设置品牌标识文本
brand.style.top = '20%'; // 设置品牌标识距离顶部 20% 的位置，使其显示在表盘上半部分
brand.style.left = '50%'; // 水平居中
brand.style.transform = 'translateX(-50%)'; // 精确居中
clockFace.appendChild(brand);
}
// 创建刻度标记的方法，分别创建小时刻度和分钟刻度
createMarkers() {
const clockFace = this.container.querySelector('.clock-face');
// 创建小时刻度，共 12 个
for (let i = 0; i < 12; i++) {
const hourMarker = document.createElement('div');
hourMarker.className = 'marker hour-marker';
hourMarker.style.transform = `rotate(${i * 30}deg)`;
clockFace.appendChild(hourMarker);
}
// 创建分钟刻度，共 60 个，跳过小时位置的刻度
for (let i = 0; i < 60; i++) {
if (i % 5 !== 0) { // 跳过小时位置的刻度
const minuteMarker = document.createElement('div');
minuteMarker.className = 'marker minute-marker';
minuteMarker.style.transform = `rotate(${i * 6}deg)`;
clockFace.appendChild(minuteMarker);
}
}
}
// 创建指针的方法，分别创建时针、分针和秒针元素
createHands() {
const clockFace = this.container.querySelector('.clock-face');
this.hourHand = document.createElement('div');
this.hourHand.className = 'hand hour-hand';
clockFace.appendChild(this.hourHand);
this.minuteHand = document.createElement('div');
this.minuteHand.className = 'hand minute-hand';
clockFace.appendChild(this.minuteHand);
this.secondHand = document.createElement('div');
this.secondHand.className = 'hand second-hand';
clockFace.appendChild(this.secondHand);
}
// 更新时间的方法，根据当前时间计算指针的旋转角度
updateTime() {
const now = new Date();
const hours = now.getHours() % 12;
const minutes = now.getMinutes();
const seconds = now.getSeconds();
// 计算指针角度
this.hourHand.style.transform = `rotate(${hours * 30 + minutes * 0.5}deg)`;
this.minuteHand.style.transform = `rotate(${minutes * 6}deg)`;
this.secondHand.style.transform = `rotate(${seconds * 6}deg)`;
}
// 启动时钟的方法，使用 requestAnimationFrame 实现动画更新
startClock() {
const animate = () => {
this.updateTime();
requestAnimationFrame(animate);
};
animate();
}
}
// 页面加载完成后初始化时钟
document.addEventListener('DOMContentLoaded', () => {
const clock = new Clock('clock-container');
});
</script>
</body>
</html>
五、结语
以上从简易到精美的四个版本示例展示了如何用HTML、CSS和JavaScript实现在线时间显示。从基础的时间格式化到动态效果，再到模拟时钟表盘的复杂实现，这些示例涵盖了不同层次的需求，可根据实际项目需求选择合适的实现方式。
通过不断优化样式和添加动态效果，实现了从简单到精美的时间显示效果。对于网页开发者来说，掌握这些技巧可以帮助自己在实际项目中创建更加丰富和有趣的用户界面。
希望本文对您有所帮助！
扫一扫
2175
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
