HTML+CSS+JavaScript的网页制作案例

QyDDLz

于 2024-10-11 10:23:00 发布

阅读量126

点赞数 3

文章标签： javascript

本文链接：https://blog.csdn.net/QyDDLz/article/details/142846992

版权

下面是一个HTML+CSS+JavaScript的网页制作案例教程案例，我们将创建一个简单的在线时钟。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>在线时钟</title>
  <style>
    .clock {
      font-family: Arial, sans-serif;
      font-size: 40px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="clock" id="clock"></div>

  <script src="script.js"></script>
</body>
</html>

CSS代码：

.clock {
  font-family: Arial, sans-serif;
  font-size: 40px;
  text-align: center;
}

JavaScript代码（script.js）：

function updateClock() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  hours = (hours < 10) ? "0" + hours : hours;
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;

  var time = hours + ":" + minutes + ":" + seconds;
  document.getElementById("clock").innerText = time;

  setTimeout(updateClock, 1000);
}

updateClock();

在这个案例中，我们使用了HTML来创建一个<div>元素，用于显示时钟的时间。CSS用于设置时钟的样式，JavaScript则用于更新时钟的时间。

JavaScript代码中的updateClock函数用于获取当前时间，并将小时、分钟和秒钟进行格式化，然后更新时钟的显示。setTimeout函数用于每隔1秒调用一次updateClock函数，以保持时钟显示的实时性。

你可以将这些代码复制到相应的文件中，然后在浏览器中打开HTML文件，即可看到一个简单的在线时钟。