在工作当中，遇见了一个UI效果，是让用户划动选择1到12小时，在网上没有找到现成的，就自己写了一个，基本可以满足效果，GitHub地址：https://github.com/Jin0811/TimePicker.git，样式如下：
这个选择器只适合移动端的使用，PC端不能使用，用户在划动的时候，样式也会相应地发生变化。’
所有的样式和代码，都放在了我的GitHub上面，这里大概说一下我实现的想法，要注意的是，我只是写了个弹出层的样子，并没有写弹出层。
页面当中，一共有14个li，其中第一个和最后一个li是空白的，作用就是占位，可以让第一个和最后一个小时滑动到中间部位。
可以看到每一次滑动，都会刚好到一个li的位置上，这个利用了ontouchend事件，在用户停止划动之后，检查ul的scrollTop值，再与刚好到每一个li的scrollTop相比，离哪个值比较近就让ul滚动到哪个值。
例如，初始时ul的scrollTop为0，此时显示的是1小时，一个li的高度为30，那么当ul的scrollTop为30时，显示的就是2小时，为60时就是3小时，那么当ul停止滑动时的scrollTop小于15时，就让它的值为0，当大于15，小于45时，让ul的scrollTop值为30，显示第二个，依次类推。
ontouchmove事件主要用于用户在划动的过程当中，修改当前li以及当前li前两个和后两个li的样式。