网页特效（尺寸、定时器）及 JSON

1 . 定时器

什么是定时器： 一段代码，间隔时间，自动执行

定时器语法：

永久定时器： 一旦开启，永久重复执行，只能手动清除
- 开启定时器： setInterval(一段代码,间隔时间)
- 清除定时器: clearInterval(定时器ID)
一次定时器： 开启之后间隔时间只会执行一次，执行完成后自动清除
- 开启定时器： setTimeout(一段代码,间隔时间)
- 清除定时器: clearTimeout(定时器ID)

    <button class="btn">移除定时器</button>
    <p id="pp">0</p>
    // 开启定时器
    let timeID = setInterval( function(){
        document.querySelector('p').innerText++
    }, 2000 )

    document.querySelector('.btn').onclick = function()
      //清除定时器
       clearInterval(timeID)
    }

注意点：

开启定时器（两个参数）
- 第一个参数类型是函数（ Function ）: 函数体内执行定时器时间结束后的代码(回调函数)
- 第二个参数类型是数字 ( Number ) : 间隔时间 , 单位：ms 毫秒(省略单位)
清除定时器 (一个参数) : 参数为定时器编号 timeID
- 一个页面可以开启很多个定时器，浏览器为了便于管理。会给每一个定时器添加编号，称之为定时器id

定时器常用功能 : 性能优化

函数防抖 : 间隔时间内多次触发事件，以最后一次为准
- 函数防抖的使用 :
1. 声明一个变量存储定时器id
2. 每一次触发事件的时候，先清除上一次的定时器，以本次为准
3. 开启定时器，间隔时间之后再触发事件处理函数
函数节流 : 间隔时间内函数只被触发一次
- 函数节流的使用 :
1. 声明变量存储本次触发的时间time
2. 每一次触发的时候，使用当前时间 time,判断两次间隔是否超过节流时间
  - 超过：触发，并且存储本次触发时间。
  - 不超过：不触发
    函数的防抖与节流详见 : 【性能优化】函数的防抖与节流

定时器场景：

(1) 电商秒杀
(2) 自业务动轮播

2 . 三大家族

offset家族

作用 : 获取元素 ‘自身’ 真实宽高与位置

offsetWidth : 获取元素真实宽度 ( 真实宽度 = width + padding*2 + border*2 )
offsetHeight : 获取元素真实高度 ( 真实高度 = height + padding*2 + border*2 )
offsetLeft : 自身左外边框到定位父元素左内边框距离
offsetTop : 自身上外边框到定位父元素上内边框距离
注意： 如果父级有定位，就是父级元素，没有的话就是 body

scroll家族

作用 : 获取元素 ‘内容’ 真实宽高与位置

scrollWidth : 内容真实宽度
scrollHeight : 内容真实高度
scrollLeft : 滚动条滚动左边的距离
scrollTop : 滚动条滚动上边的距离
场景： 固定导航、电梯导航

获取网页滚动距离

业务流程 :

网页注册滚动条事件 : window.onscroll
获取网页滚动条距离 : 获取html标签scrollLeft / scrollTop

   //1. 网页注册滚动条事件 : window.onscroll
   window.onscroll = function () {
      console.log('滚动条滚动了')
      //2.获取网页滚动条距离
      console.log(
        document.documentElement.scrollLeft,
        document.documentElement.scrollTop
      )
   }

client家族

作用 : 获取元素 ‘可视区域’ 真实宽高与位置

clientWidth : 获取可视区域宽度
clientHeight : 获取可视区域高度
cilentLeft : 获取可视区域位置（其实就是左边框宽度）
clientTop : 上边框宽度
场景： 响应式、横竖屏适配

响应式、横竖屏适配

什么是响应式布局： 一个页面适配多个不同的设备
响应式布局原理： 根据设备尺寸的不同，加载不同的样式
- 大PC >1200px 红色
- 小PC 992-1200 橙色
- 平板 768-992 黄色
- 手机 <768 绿色
响应式布局业务流程 :
- (1) 给页面注册一个尺寸变化事件(视口变化) ： window.onresize
- (2) 获取页面可视区域大小（视口大小）： document.documentElement.clientWidth
业务代码如下 :

      // (1) 给页面注册一个尺寸变化事件(视口变化) ： window.onresize
      window.onresize = function () {
        // (2)获取可视区域大小： 视口大小
        let cw = document.documentElement.clientWidth
        let ch = document.documentElement.clientHeight
        /* 响应式布局原理：根据设备不同加载不同的样式 */
        if( cw > 1200 ){
            document.body.style.backgroundColor = 'red'
        }else if( cw > 992 ){//隐藏条件 cw<=1200
            document.body.style.backgroundColor = 'orange'
        }else if( cw > 768 ){//隐藏条件 cw<=992
            document.body.style.backgroundColor = 'yellow'
        }else{//隐藏条件 cw<=768
            document.body.style.backgroundColor = 'green'
        }

        /* 横竖屏适配   竖屏： 宽度<高度  横屏: 宽度>高度 */
        if( cw < ch ){
            alert('竖屏')
        }else{
            alert('横屏')
        }
      }

3 . JSON

什么是 JSON ： JSON 是一种数据格式，本质是字符串

JSON 作用： 解决数据跨平台传输

实际业务中，前端网页的数据都是从服务器(后台)获取，而服务器编程语言不一定是 js,也可以是其他语言。例如 java、python、go、c++、c#、.net …等等。不同的编程语言数据类型不一样的。所以后台无法直接传递 js 对象的。数据涉及到跨平台传输。
后来人们发明了一种通用的数据交换格式，这种数据格式几乎所有的编程语言都支持。这就是json 对象，本质是一种字符串格式

JSON 和 js 互转：

JSON -> JS : 获取后台数据之后，必须要把 json 转成 js 才可以正常使用
- 语法 : JSON.parse(json)
JS -> JSON : 我们前端发给后台的数据不能直接发js，需要转成json
- 语法 : JSON.stringify(js)

      let js = { name: '张三', age: 18, eat: [1, 2, 3] }
      let json = ' {"name":"张三","age":"18","hobby":["吃饭","睡觉"]} '

      //(1)JSON->JS  : 把json字符串转成js对象
      let jsObj = JSON.parse(json)
      console.log(jsObj)
      //(2)JS->JSON : 把js对象转成json格式字符串
      let jsonStr = JSON.stringify(js)
      console.log(jsonStr)

【前端知识点总结】WebAPI DOM篇（三) 网页特效