<!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 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.clock-container {
background-color: #333;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}
.clock {
color: #fff;
font-size: 72px;
font-weight: bold;
text-align: center;
letter-spacing: 5px;
}
.date {
color: #ccc;
font-size: 24px;
text-align: center;
margin-top: 15px;
}
.footer {
margin-top: 30px;
color: #666;
font-size: 14px;
}
.footer a {
color: #0066cc;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="clock-container">
<div class="clock" id="clock">00:00:00</div>
<div class="date" id="date">2023年1月1日 星期一</div>
</div>
<div class="footer">
</div>
<script>
function updateClock() {
const now = new Date();
// 更新时间
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
// 更新日期
const year = now.getFullYear();
const month = now.getMonth() + 1;
const day = now.getDate();
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const weekday = weekdays[now.getDay()];
document.getElementById('date').textContent = `${year}年${month}月${day}日 ${weekday}`;
}
// 初始加载
updateClock();
// 每秒更新一次
setInterval(updateClock, 1000);
</script>
</body>
</html>
扫一扫
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
