html钟表代码
<!DOCTYPE html>
<html>
<head>
<title>HTML Clock</title>
<style>
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 20px;
color: #333;
}
.clock {
display: inline-block;
padding: 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.time {
font-size: 50px;
font-weight: bold;
text-align: center;
margin: 0;
}
.date {
font-size: 20px;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<div class="clock">
<p class="time" id="time"></p>
<p class="date" id="date"></p>
</div>
<script>
function updateTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var day = now.getDate();
var month = now.getMonth() + 1;
var year = now.getFullYear();
hours = (hours < 10 ? “0” : “”) + hours;
minutes = (minutes < 10 ? “0” : “”) + minutes;
seconds = (seconds < 10 ? “0” : “”) + seconds;
day = (day < 10 ? “0” : “”) + day;
month = (month < 10 ? “0” : “”) + month;
var timeString = hours + “:” + minutes + “:” + seconds;
var dateString = day + “/” + month + “/” + year;
document.getElementById(“time”).innerHTML = timeString;
document.getElementById(“date”).innerHTML = dateString;
}
setInterval(updateTime, 1000);
</script>
</body>
</html>
这是一个基本的HTML钟表代码，它包括一个div元素，其中包含两个段落元素，一个用于显示时间，另一个用于显示日期。CSS样式用于设置钟表的外观，JavaScript代码用于更新时间和日期。setInterval函数用于每秒钟更新一次时间和日期。
