早就有做一个自适应时钟的打算,虽然网上也趴了不少代码,但总是没法做到随意使用。

昨晚闲来无事,就用AI来做一个吧。

还是用的腾讯元宝,deepseek模型。

提问过程

一问:用js做一个简易有指针的时钟,并自适应父元素大小

二问:修复此js错误,表现在指针到达0时会反向旋转1周,另外表盘刻度错位

三问:指针还是会往回转

四问:修改后指针不动了

五问:上面的优化无效,表盘刻度在圆心附近,没有到表盘边缘

六问:现在表盘刻度全部位于12点了

七问:现在表盘刻度全部位于6点了,且在圆心处

八问:刻度正常了,但重新回到以前的状态也就是刻度在圆心处

九问:(截图后)刻度偏移成了上面的图片式样

新建对话,复制代码

问:请帮我修复此代码错误:表盘错位

手动修正

无论怎么样提问,刻度总是无法修正, 这次 AI 在处理 CSS 尤其是 transform 这个样式时有点差强人意啊。于是只好边学边用边测试,最后总算是解决了表盘问题!

这个时钟怎么样,只要引用 1 个 js,任意地方通过一个包含 clock-container 类的 div 来调用,大小(不能小到看不见)随意设置。

<script src="https://demo.hollowman.cn/clock/clock.js"></script>
<div class="clock-container" style="width: 300px;height: 300px;margin:auto"></div>