预览
开发
1. 最终效果
2. 开发环境
taro react v3.2.12
3. 实现原理
- 每一秒获取本地当前时间,进行时间的修改和转动!
- transition 执行旋转动画;
- transform 执行旋转角度。
4. SCSS 实现
- 引入 unidreamLED 字体!
- 设置界面默认的css;
- 设置显示罗盘的盒子大小【rui-date-roulette-content】;
- 提取年月日时分秒盒子公用代码【rui-common-content】;
- 分别设置年月日时分秒盒子的大小和边框颜色【rui-year-content,rui-month-content,rui-day-content,rui-hour-content,rui-minute-content,rui-second-content】;
- 提取月日时分秒的指针代码【rui-point-li】;