[分享]css中怎么获取当前时间信息

在 CSS 中，我们可以使用伪元素 ::before 或 ::after 来插入当前时间信息。

.clock::before {
  content: "当前时间是：" attr(data-current-time);
} 

上面代码中，我们使用了 content 属性来插入文字信息。但是如何显示当前时间呢？这就要用到 attr() 函数和 data-* 属性了。

首先，在 HTML 中添加一个 <div> 元素，并设置一个自定义属性 data-current-time，并将其值设置为空，如下所示：

<div class="clock" data-current-time=""></div> 

然后，在 CSS 中，我们使用 attr() 函数来获取 data-current-time 的值，并插入到 content 中。代码如下：

.clock::before {
  content: "当前时间是：" attr(data-current-time);
} 

接下来，我们需要使用 JavaScript 来动态更新 data-current-time 的值。代码如下：

const clock = document.querySelector('.clock');

setInterval(() => {
  const currentDateTime = new Date().toLocaleString();
  clock.setAttribute('data-current-time', currentDateTime);
}, 1000); 

上述代码中，我们首先通过 document.querySelector() 方法获取到 .clock 元素，然后使用 setInterval() 方法每隔一秒钟更新一次 data-current-time 的值。我们从 JavaScript 中获取当前日期和时间，并将其格式化成字符串，然后使用 setAttribute() 方法将其设置为 data-current-time 的值。

最后，我们就可以在页面中看到当前时间的信息了。代码效果如下：