本文详细介绍了如何使用HTML、CSS和JavaScript创建一个简单的动态时钟，通过setInterval函数每秒更新显示当前时间。
代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function updateClock() {
var now = new Date();
var hours = now.getHours().toString().padStart(2, '0');
var minutes = now.getMinutes().toString().padStart(2, '0');
var seconds = now.getSeconds().toString().padStart(2, '0');
var timeString = hours + ':' + minutes + ':' + seconds;
document.getElementById('clock').textContent = timeString;
}
setInterval(updateClock, 1000);
</script>
<style>
.clock {
font-family: Arial, sans-serif;
font-size: 48px;
color: #333;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin: 0 auto;
}
</style>
</head>
<body>
<div id="clock" class="clock"></div>
</body>
</html>
效果图展示：
扫一扫
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
