用兩天晚上的時間用原生JS擼出一個時間選擇器，發(fā)現(xiàn)并沒有自己想象的那么復(fù)雜，只要了解關(guān)于JS的Date對象和方法、以及如何處理事件和DOM，基本就可以了。
時間選擇器
直接看DEMO
說說踩到的坑：
關(guān)于觸發(fā)事件的元素
JS的事件機(jī)制是由捕獲和冒泡組成的，先捕獲到最底部的元素，再逐層冒泡觸發(fā)事件。而在chrome開發(fā)中，可以通過event.srcElement 和 event.target 去獲取觸發(fā)的元素的，而在 firefox 中，只能通過 event.target 獲取， 通過查找資料，在 IE 中只能通過 event.srcElement 去獲取。
about srcElement and target關(guān)于對象的比較
如果你嘗試對兩個Date對象進(jìn)行大小的比較，你會發(fā)現(xiàn)可以得到結(jié)果，但如果使用 == 去比較，就永遠(yuǎn)都是 false。
這個仔細(xì)想想就明白了，當(dāng)我們使用 > | < | >= | <= 這些符號去比較兩個對象時，比較的時候會自動調(diào)用 Object.valueOf() 函數(shù)，如果 valueOf獲取到的還是對象無法比較的話，那么就會調(diào)用 Object.toString() 將對象轉(zhuǎn)化為字符串來比較；
但是如果使用 == 或者 === 時， 比較的是對象的地址是否一樣，也就是這個變量存儲的指向?qū)ο蟮牡刂肥欠褚恢铝恕?/p>
這個可以通過下面的例子去理解：
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 可以獲取元素相對父容器的左邊距和頂部邊距，然后循環(huán)迭代到頂層節(jié)點，從而計算出元素的絕對位置， 有了絕對位置，可以通過 scrollLeft 和scrollTop 計算出元素相對于瀏覽器的位置。
DEMO
