HTML新年灯笼源码
以下是一个简单的HTML新年灯的实现示例，使用了HTML、CSS和JavaScript。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New Year Clock</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #222;
font-family: Arial, sans-serif;
}
.clock {
color: white;
font-size: 48px;
text-align: center;
}
</style>
</head>
<body>
<div class="clock"></div>
<script>
function updateClock() {
const now = new Date();
const hours = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();
const clockText = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
document.querySelector('.clock').textContent = clockText;
}
setInterval(updateClock, 1000);
updateClock();
</script>
</body>
</html>这段代码会在网页上显示一个简单的时钟，并且会随着时间的变化而更新。时钟会以白色字体在中心显示，背景是深色调，适合用作新年灯的简单版本。
评论已关闭