以下是一个基本的HTML时钟实现代码示例:
html
<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
<style>
.clock {
text-align: center;
font-size: 48px;
font-weight: bold;
}
</style>
<script>
function updateClock() {
var now = new Date();
var hour = addZeroPrefix(now.getHours());
var minute = addZeroPrefix(now.getMinutes());
var second = addZeroPrefix(now.getSeconds());
var timeString = hour + ":" + minute + ":" + second;
document.getElementById("clock").innerHTML = timeString;
setTimeout(updateClock, 1000); // 每秒钟更新一次时钟
}
function addZeroPrefix(num) {
return (num < 10 ? "0" : "") + num;
}
</script>
</head>
<body onload="updateClock()">
<div class="clock" id="clock"></div>
</body>
</html>
上述代码中,我们定义了一个updateClock()
函数来更新时钟,并在页面加载完成时调用该函数。updateClock()
函数
获取当前时间并将其显示在具有"clock"
id的<div>
元素中。然后,我们使用setTimeout()
函数每秒钟调用一次
updateClock()
函数,以便更新时钟。
通过上述代码,您可以在网页上实现一个简单的时钟效果。您可以根据需要自定义CSS样式以及时钟显示格式。