在 CSS 中,我们可以使用伪元素 ::before 或 ::after 来插入当前时间信息。.clock::before { content: 当前时间是: attr(data-current-ti
在 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
的值。
最后,我们就可以在页面中看到当前时间的信息了。代码效果如下:
粉丝
0
关注
0
收藏
0