帮我写一个实时时钟背景图
当然可以！以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>实时时钟背景图</title>
<style>
body {
background-image: url("clock.jpg"); /* 请将 "clock.jpg" 替换为你想要的背景图片 */
background-size: cover;
background-position: center;
background-repeat: no-repeat;
font-family: "Arial", sans-serif;
}
#clock {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 80px;
color: white;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div id="clock"></div>
<script>
function updateClock() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
hours = hours.toString().padStart(2, "0");
minutes = minutes.toString().padStart(2, "0");
seconds = seconds.toString().padStart(2, "0");
var time = hours + ":" + minutes + ":" + seconds;
document.getElementById("clock").textContent = time;
setTimeout(updateClock, 1000);
}
updateClock();
</script>
</body>
</html>
这个示例使用了一个背景图片（请将 "clock.jpg" 替换为你想要的背景图片），并在页面中心显示了一个实时时钟。每秒钟，JavaScript 代码会获取当前时间并更新时钟显示
原文地址: https://www.cveoy.top/t/topic/hGjq 著作权归作者所有。请勿转载和采集!