纯JS实现时间选择器

用两天晚上的时间用原生JS撸出一个时间选择器，发现并没有自己想象的那么复杂，只要了解关于JS的Date对象和方法、以及如何处理事件和DOM，基本就可以了。

时间选择器

直接看DEMO

说说踩到的坑：

• 关于触发事件的元素
  JS的事件机制是由捕获和冒泡组成的，先捕获到最底部的元素，再逐层冒泡触发事件。而在chrome开发中，可以通过event.srcElement 和 event.target 去获取触发的元素的，而在 firefox 中，只能通过 event.target 获取， 通过查找资料，在 IE 中只能通过 event.srcElement 去获取。
  about srcElement and target

• 关于对象的比较
  如果你尝试对两个Date对象进行大小的比较，你会发现可以得到结果，但如果使用 == 去比较，就永远都是 false。
  这个仔细想想就明白了，当我们使用 > | < | >= | <= 这些符号去比较两个对象时，比较的时候会自动调用 Object.valueOf() 函数，如果 valueOf获取到的还是对象无法比较的话，那么就会调用 Object.toString() 将对象转化为字符串来比较；
  但是如果使用 == 或者 === 时， 比较的是对象的地址是否一样，也就是这个变量存储的指向对象的地址是否一致了。

这个可以通过下面的例子去理解：

var a = { 'a': 100};
var b = {'a': 100};
a == b // false
a > b // false
a < b // false
a >= b // true
a <= b // true
a.toString = function() { return 1000;}
b.toString = function() { return 999; }
a > b // true
a < b // false
a >= b // true
a <= b // false

a.valueOf = function() { return this['a'];}
a.valueOf = function() { return this['a'];}
a > b // false
a >= b // true
b < a // false
b <= a // true

• 如何获取元素的绝对位置
  通过 obj.offsetLeft 和obj.offsetTop 可以获取元素相对父容器的左边距和顶部边距，然后循环迭代到顶层节点，从而计算出元素的绝对位置， 有了绝对位置，可以通过 scrollLeft 和scrollTop 计算出元素相对于浏览器的位置。
  DEMO

资源

• 用Javascript获取页面元素的位置
• 时间选择器任务