以下是一个实时时钟背景图的代码示例:

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 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录