电子时钟--html+css+js实现
是一个电子时钟示例，使用HTML、CSS和JavaScript创建
HTML
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>电子时钟</title>
</head>
<body>
<div class="clock" id="clock">
<h1 id="time"></h1>
</div>
<script src="script.js"></script>
</body>
</html>
CSS (styles.css)
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #282c34;
color: white;
font-family: Arial, sans-serif;
}
.clock {
text-align: center;
border: 2px solid white;
border-radius: 10px;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
}
JavaScript (script.js)
function updateTime() {
const now = new Date();
let hours = String(now.getHours()).padStart(2, '0');
let minutes = String(now.getMinutes()).padStart(2, '0');
let seconds = String(now.getSeconds()).padStart(2, '0');
document.getElementById('time').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateTime, 1000);
updateTime(); // 初始化时钟
说明
- HTML 部分构建了时钟的基本结构。
- CSS 部分设置了样式，确保时钟在页面中居中并美观。
- JavaScript 部分使用
setInterval函数每秒更新时间，并且使用padStart方法确保时钟格式正确（如 “09:05:03”）。
将这三部分代码分别保存在相应的文件中，你将得到一个简单的电子时钟，可以在浏览器中查看。