帮我写一个实时时钟背景图代码
以下是一个实时时钟背景图的代码示例:
HTML:
<!DOCTYPE html>
<html>
<head>
<title>实时时钟背景图</title>
<style>
body {
background-image: url('clock.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: Arial, sans-serif;
color: #fff;
font-size: 48px;
}
</style>
</head>
<body>
<div id="clock"></div>
<script src="clock.js"></script>
</body>
</html>
JavaScript (clock.js):
function updateTime() {
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var clock = document.getElementById('clock');
clock.innerText = formatTime(hours) + ':' + formatTime(minutes) + ':' + formatTime(seconds);
setTimeout(updateTime, 1000);
}
function formatTime(time) {
return time < 10 ? '0' + time : time;
}
updateTime();
请注意,上述代码假设你有一张名为"clock.jpg"的时钟背景图,你可以将其替换为你自己的背景图。此外,代码中使用了setTimeout函数每秒钟更新一次时间
原文地址: https://www.cveoy.top/t/topic/hGjr 著作权归作者所有。请勿转载和采集!