javascript - 这种计时器上下拉动选择数字怎么实现的

问题描述

问 题

小时的数字选择到0的时候上面已经没有数字可以选择了，但是分钟不一样，还可以往上选从59开始循环，这是怎么实现的，并且数字转动到框里面样式发生改变，是怎么确定该数字转到了框里的。

解决方案

写一下思路，首先：使用DIV+CSS+JS实现，不能用select；

数字是使用transform3d做的变形效果；

分钟滚动的动画效果由JS捕捉用户行为判断滑动距离，添加css动画transition配合transformY轴位移实现；
从0向上滚动到59需要复制一个组出来→ 查看DEMO
DEMO里设定每分钟的高度是14px，初始化时的值translate3d(0,-112px,0);
这样一上来焦点就在0这个位置了，若想知道用户滚动的值是多少
就根据translate3d(0,-112px,0)的值/14（每分钟行的高度） 计算滑动到了第几个值
比如demo第一行是8 ，8*14 = 112

这篇关于javascript - 这种计时器上下拉动选择数字怎么实现的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！