时钟代码,在HTML中实现动态的时钟

此代码创建了一个动态时钟,其中 updateClock 函数会每秒更新一次当前时间,并将其显示在页面上。JavaScript 的 setInterval 函数用于每秒调用 updateClock 函数以更新时钟。以下是一个简单的HTML和JavaScript代码示例,用于在网页上实现动态的时钟:

代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Clock</title>
<style>
  #clock {
    font-family: Arial, sans-serif;
    font-size: 48px;
    font-weight: bold;
    color: #333;
  }
</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();

  // Add leading zeros if needed
  hours = (hours < 10 ? "0" : "") + hours;
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;

  // Format the time
  var timeString = hours + ":" + minutes + ":" + seconds;

  // Update the clock element
  document.getElementById("clock").innerHTML = timeString;
}

// Update the clock every second
setInterval(updateClock, 1000);

// Initial call to display the clock immediately
updateClock();
</script>
</body>
</html>
过期时间:永久公开
创建于:2024-03-21 17:54
62