网站上的时间 - HTML

在网站设计中，显示时间是很常见的需求。在HTML中，可以使用JavaScript来获取当前时间并将其显示在页面上。同时还可以使用CSS样式来美化时间的呈现。

获取当前时间

使用JavaScript编写一个获取当前时间的函数：

function getTime() {
  let now = new Date();
  let hours = now.getHours();
  let minutes = now.getMinutes();
  let seconds = now.getSeconds();
  return hours + ":" + minutes + ":" + seconds;
}

这个函数使用Date对象获取当前时间，并将小时、分钟、秒拼接为一个字符串返回。

在页面上显示时间

要在页面上显示时间，需要先在HTML中定义一个装时间的容器，例如：

<div id="time"></div>

然后在JavaScript中获取这个容器并将时间写入其中：

let timeContainer = document.getElementById("time");
timeContainer.innerHTML = getTime();

这个JavaScript代码将获取id为"time"的div元素，并将其innerHTML设置为当前时间字符串。

样式美化

要美化时间的呈现，可以使用CSS样式。例如，可以设置字体、大小、颜色等属性：

#time {
  font-family: Arial, sans-serif;
  font-size: 24px;
  color: #333333;
}

这样的CSS样式会将id为"time"的div元素的字体设置为Arial，大小设置为24像素，颜色设置为深灰色。

效果展示

最终呈现效果如下所示：

<div id="time" style="font-family: Arial, sans-serif; font-size: 24px; color: #333333;">12:34:56</div>

总结

在HTML页面中，使用JavaScript和CSS可以轻松获取当前时间并将其呈现到网页上，并可以自定义样式来美化时间的呈现。