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

Question

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

Answer 1

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