180406 客戶端JS WebAPI

Date對象

var oDate = new Date();

• oDate.getDate() —— 幾號
• oDate.getDay() —— 星期幾 [0-6]
• oDate.getFullYear() —— 年
• oDate.getMonth() —— 月 [0-11]
• oDate.getHours() —— 時[24時]
• oDate.getMinutes() —— 分 [對象創建時爲起點]
• oDate.getSenconds() —— 秒
• oDate.getMilliseconds() —— 毫秒
• oDate.getTime() —— 計算機元年到此刻的毫秒數 [ 時間戳驗證碼，代碼執行時間測試 ]
• oDate.setDate(getDate()+5) —— 設置時間

---

定時器

• setTimeout()
  setTimeout() 方法用於在指定的毫秒數後調用函數或計算表達式。

setTimeout(code,millisec)
code    必需。要調用的函數後要執行的 JavaScript 代碼串。
millisec    必需。在執行代碼前需等待的毫秒數。
返回值       定時器的表示

setTimeout(function(){
    alert(0);
},3000);

• clearTimeout(定時器) —— 清除定時器

---

• setInterval()
  setInterval() 方法可按照指定的週期（以毫秒計）來調用函數或計算表達式

setInterval(code,millisec[,"lang"])
code    必需。要調用的函數或要執行的代碼串。
millisec    必須。週期性執行或調用 code 之間的時間間隔，以毫秒計。

setInterval(function(){
    console.log(0);
},1000);

• clearInterval(定時器)

---

防抖

函數防抖就是在函數需要頻繁觸發情況時，只有足夠空閒的時間，才執行一次。

<input type="text" id="inp">
    <script>
        var inp = document.getElementById('inp');

        function debounce(handler, delay) {
            var timer = null;
            return function(e) {
                var _self = this,
                    _arg = arguments;
                clearTimeout(timer);
                timer = setTimeout(function() {
                    handler.apply(_self, _arg);
                }, delay);
            }
        }

        function getDataByAjax(e) {
            console.log(e);
            var keyWords = this.value;
            var data = 'abc' + new Date().getTime();
            console.log(keyWords, data);
        }
        inp.oninput = debounce(getDataByAjax, 500);
    </script>

---

節流

函數節流就是預定一個函數只有在大於等於執行週期時才執行，週期內調用不執行。瀑布流，頁面滾動，搶購點擊。

<div id="show">0</div>
<button id="btn">GRAB</button>
<script>
function throttle(handler, wait) {
    var lastTime = 0;
    return function() {
        var curTime = new Date().getTime();
        // console.log(curTime);
        if (curTime - lastTime >= wait) { // 點擊時獲取當前時間，減去上一次丁一時間，大於給定間隔時間
            handler.apply(this, arguments);
            lastTime = curTime;
        }
    }
}

function grabMoney(e) {
    // console.log(this, e);
    console.log(show.innerText++);
}
btn.onclick = throttle(grabMoney, 600);

---

• window.pageXOffset/YOffset 橫/縱座標上滾動條距離起始位置的距離
• document.body.scrollLeft /scrollTop
• document.documentElement.scrollLeft/scrollTop
• window.innerWidth/innerHeight 獲取可視窗口寬度/高度（包含滾動條）
• document.body.clientWidth/clientHeight (標準模式下顯示body元素的長和寬，怪異模式下顯示窗口寬高)
• document.documentElement.clientHeight/clientWidth(標準模式下顯示當前可視窗口寬高，不含滾動條)
• offsetWidth/offsetHeight 獲取div盒子的寬高
• offsetLeft/offsetTop 左側邊界距離到最近有定位的父級的距離
• offsetParent 返回最近有定位的父級
• scroll(width,height) / scrollTo() 滾動到多少像素
• scrollBy() 滾動了多少像素
• window.getComputedStyle(oDiv,null) [‘weight’] 可以獲得一個標籤的所有屬性，返回一個數組，通過索引查詢
• window.getComputedStyle(oDiv,after) 獲取僞元素的屬性

• document.styleSheet 返回HTML裏所有樣式表的集合
• document.styleSheet[0] —– 一共有幾個樣式表（幾個style標籤）
• document.styleSheet[0].rules[0] —– 樣式表裏有幾個樣式代碼塊
• document.styleSheet[0].rules[0].style.width = ‘200px’

---

事件

綁定事件

oDiv.onclick = function(){}

oDiv.attachEvent('onclick',function(){
    // ie10以下  注意 this:window
})

Element.addEventListener('事件類型',事件處理函數,事件處理方式)
[w3c推薦使用]

同一個事件類型可以綁定多個不同的事件處理函數

oDiv.addEventListenr('click',function(){
    console.log('cst')
},false);

oDiv.addEventListenr('click',function(){
    console.log('cst');
},false)

由於兩個函數不相等，所以綁定了兩個不同的事件處理函數，因此會輸出兩遍

function show(){
    console.log('cst')
}
oDiv.addEventListener('click',show,false);
oDiv.addEventListener('click',show,false);
同一個函數，輸出一次

解除事件

oDiv.onclick = null;

oDiv.removeEventListener('click',show,false);
//匿名函數GG

oDiv.attachEvent('onclick',test);
oDiv.detachEvent('onclick',test);

事件處理模型–事件冒泡，事件捕獲

事件冒泡：結構上嵌套關係的元素，會存在事件冒泡的功能，自底向上。

Element.addEventListener('click',Func,true);

Element.onclick = Func

事件捕獲：由上向下

Element.addEventListener('click',Func,false);

有的標籤沒有事件，有的是捕獲有的是冒泡

先補獲再冒泡

阻止事件冒泡

Element.stopPropagation()
[w3c推薦]

Element.cancelBubble = true;
[IE]

阻止默認事件

Element.onclick = Func(){
    return false;
    //只有通過這種方式綁定事件可以用return false來阻止默認事件
}

document.addEventListener('contextmenu',function(e){
    e.preventDefault();
},false);

Element.attachEvent('onclick',fucntion(e){
    e.returnValue = true;
},false);

事件委託

節省性能
當有新子元素時也不用再次綁定

事件分類

鼠標點擊過程觸發的事件：mousedown,mouseup,click

click事件只能監聽左鍵

onmouseenter / onmouseleave 鼠標進入，移出

onkeydown/up 所有按鍵都可以

onkeypress 字符類按鍵

oninput oInp.onfocus / onblur 聚焦/失焦事件

oInp.change 事件 ：檢測失焦聚焦前後內容的變化，有變化觸發

window.onload 事件：整個頁面加載成功

window.onresize 事件：瀏覽器大小發生變化觸發

window.onscroll 事件 ：滑輪滾動時觸發，懶加載，瀑布流