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 事件 ：滑轮滚动时触发，懒加载，瀑布流