悬浮时钟怎么设置在页面上

悬浮时钟这东西，我以前试过，搞了好久呢。记得是2016年，我在一个项目中要加个时钟，想着炫酷一点，就选了悬浮的。一开始以为很简单，结果一搞起来就头疼了。
我那时候是直接用HTML和CSS做的，先是在页面上放一个div，然后设置好位置和样式，让它悬浮在页面上。然后是关键，怎么让这个div里的内容是动态的时钟呢？我就用了JavaScript，写了个函数，定时去获取当前时间，然后更新div里的内容。
当时是这么写的：



这样，页面上的时钟就动起来了。不过啊，后来我又发现了一个问题，这个时钟在页面滚动的时候会跟着滚动，看起来就很不自然。我就又花了好久去研究怎么让它固定在页面上不动，最后是在CSS里加了个position: fixed;才搞定。
这块儿我倒是没碰过其他方法，比如使用jQuery或者框架里的组件，感觉那样可能更简单，但我那时候就是喜欢手动写，所以就用原生JavaScript了。哈现在看来，其实也没那么复杂嘛。

悬浮时钟这东西，挺有意思的。我之前就弄过，得先说，这东西在2022年那个某个城市，挺火的。设置嘛，先得有HTML标签，然后是CSS样式，再就是JavaScript来控制时间的显示。
HTML标签，得放一个div，给它个类名，比如叫“悬浮时钟”：

然后是CSS，这得让它飘起来，得有个定位是“fixed”，这样不管你怎么滚动页面，它都跟着固定在屏幕上。位置嘛，比如让它居中，可以设置上下左右都是50%，再减去自身宽高的一半，这样它就正好居中了。颜色啊，大小啊，随你喜好来：
css .悬浮时钟 { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 24px; / 其他样式 / }
最后是JavaScript，这个得负责更新时间。你可以用setInterval函数，每隔一段时间（比如1000毫秒，也就是1秒）去更新时间。时间嘛，你可以用new Date()来获取当前时间，然后格式化一下，比如显示到小时、分钟、秒：
javascript function 更新时间() { var now = new Date(); var 小时 = now.getHours().toString().padStart(2, '0'); var 分钟 = now.getMinutes().toString().padStart(2, '0'); var 秒 = now.getSeconds().toString().padStart(2, '0'); var 时间 = 小时 + ':' + 分钟 + ':' + 秒; document.querySelector('.悬浮时钟').textContent = 时间; }
setInterval(更新时间, 1000);
这样，你就有了一个悬浮在页面上的时钟了。我当时也懵，搞了半天，最后才反应过来，其实也没那么复杂。可能我偏激了，但这就是我当时的感受。