早就有做一个自适应时钟的打算,虽然网上也趴了不少代码,但总是没法做到随意使用。
昨晚闲来无事,就用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>
牛哦
AI 的功劳 😀
功能不错,再美化一下更好;好像有专攻UI设计方面的AI可以试试
最初设想是放到 sidebar 那里,AI 慢慢发现慢慢学 😊
AI也卷啊,也说不上人到底有没有轻松多少