如何构建点击时间选择器 - jquery

Question

我有一个需要自定义构建时间选择器的客户端。它必须简单 - 只需一个圆圈，它可以点击鼠标光标的位置并将其转换为时间。

我知道如何相对于元素（圆圈）获取光标位置然后我想如果我可以计算时间00:00和穿过圆圈中间的线和光标位置之间的角度应该很容易翻译成时间。

知道怎么做吗？也许有另一种方法来创建这样的时间戳？

Answer 1

我会分别建造一个小时选择器和一个分钟选择器。就像Android Kit Kat一样。

我会建立时钟，用css绝对定位你的物品。每小时将其分解为自己的元素，以便当用户点击时，您知道它的时间。

<ul id="hour">
   <li>12</li>
   <li>1</li>
   <li>2</li>
   ....
</ul>

用户启动点击事件后，每隔5分钟隐藏小时并构建/显示分钟时钟。

<ul id="minutes">
    <li>00</li>
    <li>05</li>
    <li>10</li>
    <li>15</li>
    ...
</ul>

分配点击事件

 $('#hour li, #minutes li').click(function(e) {
      console.log($(e.target).val());
      // do whatever
 });