web API 四

一 常用的键盘事件
监听键盘抬起用 onkeyup
监听键盘按下用 onkeydown
1 onkeydown和onkeypress有什么不同？
keydown 按键按下的时候触发 能识别功能键 比如ctrl shift 左右箭头
keypress 按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头
2 三个事件的执行循序 
    keydown --> keypress --> keyup
3 keyCode 判断用户按下那个键
    利用事件对象的那个属性 可以获取键盘码？
        e.keyCode
    监听什么事件可以区分键盘大小写？
        keypress
// 1.什么是BOM：浏览器对象模型
    // 2.bom 是包含了 dom，bom的顶级对象是window  dom的对象是document
    // 3.一般全局变量或者函数都是挂载在window，调用函数或者使用全局变量的时候可以不写window
    // window常见事件：
    // 一、页面加载事件
    // onload   语法:window.onload=function      window.addEventListener('load',function(){})
    // 它是页面加载完成后才会执行
    // 如果希望js在页面加载完成后再去执行，一般我们这样写eg:
    // window.addEventListener('load',function(){
    //     console.log('页面加载完成了');
    // })
    // DOMcontentLoaded是页面DOM元素加载完成后(不是重点)
    // 区别：1.和onload区别就是不会等待css,js文件图片等资源加载完
    // 2.是DOM上的方法，需要绑定在document上  eg:  document.addEventListener('DOMcontentLoaded'，funciton(){})
    // 二、浏览器窗口大小事件
    // onresize  语法:window.onresize=function      window.addEventListener('resize',function(){})
    // 它是浏览器窗口大小发生变化的时候会触发，如果一直缩放浏览器窗口就会一直触发eg:
    // window.onresize=function(){
    //     console.log('变化了');
    // }
    // 回调函数：回头调用的函数就是回调函数
    // 定时器：
    // 1.延时器  ：过一段时间去执行回调函数
    // 语法：setTimeout(回调函数,延迟执行的时间) 回调函数可以是匿名函数也可以是命名函数  时间单位是毫秒数 
    // 匿名函数写法eg:
    //  setTimeout(function(){
    //      console.log(1);
    //  },3000)
    // 命名函数写法eg：
    //  function fn (){
    //      console.log(1);
    //  }
    //  setTimeout(fn,3000)
    // 如果要想清空延时器，就必须要给延时器给个名字，这样清除的时候才能找到对应的延时器
    // 清除延时器的语法: clearTimeout(要清空的延时器名)
    // 清除eg:  
    // var timer = setTimeout(fn,3000)
    // clearTimeout(timer)
    // 2.计时器:每过一段时间，就去执行以下回调函数 
    // 语法：setInterval(回调函数,间隔执行时间)  回调函数可以是匿名函数也可以是命名函数  时间单位是毫秒数 
    // 匿名函数写法eg:
    //  语法：setInterval(function(){
    //      console.log(1);
    //  },3000)
    // 命名函数写法eg：
    //  function fn (){
    //      console.log(1);
    //  }
    //  语法：setInterval(fn,3000)
    // 如果要想清空计时器，就必须要给计时器给个名字，这样清除的时候才能找到对应的计时器
    // 清除计时器的语法: clearInterval(要清空的计时器名)
    // 清除eg:  
    // var timer = setInterval(fn,3000)
    // clearInterval(timer)
    // timer=null
    // 清空以后，最好将变量设置成null
    // 案例：过五秒清除广告
    // setTimeout(function(){
    //     ad.style.display='none'
    // },5000)
    // 案例：倒计时案例
    // 1、通过日期对象拿到当前时间的时间戳  毫秒数
    // 2、通过传入时间拿到结束时间的时间戳  毫秒数
    // 3、用结束时间-当前时间得到时间差   也是毫秒数
    // 4.将算法封装成函数：
    //  毫秒数/1000  = 秒数
    //  因为计算的可能是小数，需要parseInt取整
    //  parseInt(秒数%60) = 剩余的秒数
    //  parseInt(秒数/60%60) = 剩余的分钟
    //  parseInt(秒数/60/60%24) = 剩余的小时
    // 通过setInterval每秒钟去调用函数
    // 因为setInterval第一次执行也会间隔相应的时间，所以在执行计时器前，也要先调用一下函数，避免页面空白
    // 案例：发送短信
    // 要素 ：按钮
    // 效果：点击按钮 ，按钮禁用， 提示倒计时
    // 1、获取按钮，绑定点击事件
    // 2、点击时禁用按钮，更新按钮的innerHTML
    // 3、因为要提示剩余几秒，所以将秒数定义为变量，每秒执行函数的时候进行变量--
    // 4、如果秒数为0就1.停止计时器2.按钮的disabled=false.3按钮的innerHTML='发送'
    // this指向问题：谁调用的就指向谁，构造函数的this指向实例化对象
    // JS执行机制：碰见异步代码往后放
    // 关键词：
    // 1.执行栈（存放代码的位置）
    // 2.异步队列（代码执行完成后会将异步代码放在这里）
    // 3.任务队列（存放的是异步代码的执行结果）
    // 4.事件循环（重复123步骤直到代码全部运行完成）
    // location对象
    // location.href可以获取浏览器的地址(URL) 
    // location.search可以获取浏览器地址中的参数
    // 案例：获取URL中的参数
    // 思路：
    // 1.通过location.search拿到参数，是个字符串
    // 2. 截取字符串中的第一位(?)   xxxx=xxxxx    属性名=属性值  var str=str.substr(1)代表从1开始截取到最后
    // 3.以'='分割字符串，得到数组  var arr = str.split('=')是按照'='左右将字符串分割为数组
    // 4.数组中的最后一位就是我们要的值  arr[1]
    // 拓展：如果是多个参数，怎么办？
    // 1.通过location.search拿到参数，是个字符串
    // 2. 截取字符串中的第一位(?)   xxxx=xxxxx&xxxx=xxxxx    属性名=属性值  var str=str.substr(1)代表从1开始截取到最后
    // 3. 以'&'分割字符串，得到数组  var paramsArray = str.split('&')  paramsArray是存放每个属性名=属性值(xxxx=xxxxx)的数组
    // 4. 循环paramsArray，以'='分割字符串，得到数组  var arr = paramsArray[i].split('=')是按照'='左右将字符串分割为数组
    // location常见方法：
    // assign、replace、reload  都是刷新网址的，重点是reload可以实现刷新页面
    // navigator.userAgent可以帮助我们识别用户的设备，通常用来区分手机端还是PC端，只要会复制粘贴代码就行
    // history对象：
    // 效果：能实现浏览器前进还是后退
    // 前进window.forward()
    // 后退window.back()
    // 实现前进或后退window.go(如果要前进或者后退多个，传个数字类型的参数就行)eg:window.go(-2),前进是正数，后退是负数
    // 元素偏移：
    // 获取距离带有定位父元素的位置，如果父元素都没有定位，就去找body
    // offsetLeft：距离带有定位父元素左侧的距离
    // offsetTop：距离带有定位父元素上方的距离
    // offsetWidth：获取自身带有padding,border,content的宽度
    // offsetHeight：获取自身带有padding,border,content的高度
    // 所有offset获取的都是不带单位的数字，并且offset只能获取不能设置
    // 因为style只能获取行内样式，局限比较大，所以通常都是靠offset去获取，style来设置，记得加单位
    // offsetParent：获取带有定位的父元素，如果找不到，就认为是body