Web API笔记05、06、07 js一些常见方法

1.offset系列

• offset，偏移量，只能获取不能更改

1. offsetTop，返回元素距离具有定位的父元素的上方的偏移（Y轴大小），如果没有，就是到body的距离
2. offsetLeft，返回元素距离具有定位的父元素的左边框的偏移（Y轴大小），如果没有，就是到body的距离
3. offsetWidth，返回元素自身宽度，包含padding、边框、内容区
4. offsetHeight，返回元素自身高度，包含padding、边框、内容区
5. offsetParent，返回带有定位的父元素，如果没有，则返回body
6. 仿京东放大镜代码

		var box = document.querySelector('.box');
        var mask = document.querySelector('.mask');
        var big = document.querySelector('.big');
        box.addEventListener('mouseover', function () {
            mask.style.display = 'block';
            big.style.display = 'block';
        });
        box.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            big.style.display = 'none';
        });
        box.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft; //获取鼠标坐标
            var y = e.pageY - this.offsetTop;
            var maskX = x - mask.offsetWidth / 2;
            var maskY = y - mask.offsetHeight / 2;
            //限制遮挡层的移动范围  0~100,100为大盒子宽度-遮挡层宽度
            var maskMax = box.offsetWidth - mask.offsetWidth;
            if (maskX <= 0) {
                maskX = 0;
            } else if (maskX >= maskMax) {
                maskX = maskMax;
            };
            if (maskY <= 0) {
                maskY = 0;
            } else if (maskY >= maskMax) {
                maskY = maskMax;
            };
            //遮挡层坐标跟随鼠标坐标
            mask.style.left = maskX + 'px';
            mask.style.top = maskY + 'px';
            //大图片的移动距离 = 遮挡层移动距离*大图片最大移动距离/遮挡层最大移动距离
            var bigImg = document.querySelector('.bigImg');
            var bigMax = bigImg.offsetWidth - big.offsetWidth; //大图片最大移动距离
            var bigX = maskX * bigMax / maskMax;
            var bigY = maskY * bigMax / maskMax;
            bigImg.style.left = -bigX + 'px';
            bigImg.style.top = -bigY + 'px';
        })

2.client系列

1. clientWIdth，返回元素的自身宽度，包括内容、padding
2. clientHeight，返回元素的自身高度，包括内容、padding
3. clientTop，返回上边框的大小
4. clientLeft，返回左边框的大小

3.scroll系列

1. scrollWidth，返回自身实际内容的宽度，不包含边框
2. scrollHeight，返回自身实际内容的高度，不包含边框
3. scrollTop，返回被卷上去的上侧距离
4. scrollLeft，返回被卷上去的左侧距离

• window.pageYOffset,页面被卷上去的距离
• 淘宝固定侧边栏代码

		var sliderbar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop;
        var sliderbarTop = sliderbar.offsetTop;
        var main = document.querySelector('.main');
        var goback = document.querySelector('.goBack');
        var mainTop = main.offsetTop;
        document.addEventListener('scroll',function(){
            // console.log(window.pageYOffset);页面被卷去的上册距离
            if(window.pageYOffset >= bannerTop){
                sliderbar.style.position = 'fixed';
                sliderbar.style.top = sliderbarTop  - bannerTop　+ 'px';
            }else{
                sliderbar.style.position = 'absolute';
                sliderbar.style.top = sliderbarTop　+'px';
            };
            if(window.pageYOffset >= mainTop){
                goback.style.display = 'block';
            }else{
                goback.style.display = 'none';
            };
        });

4.触屏事件

1. touchstart，点击，开始触摸
2. touchmove，点击划动，持续触摸
3. touchend，结束触摸
4. touchcancel，中断触摸

5.触摸事件常见对象

• 都是伪数组

1. touches，正在触摸的所有手指的一个列表
2. targetToushes，正在触摸当前DOM元素上的手指的列表，常用
3. changedTouches，手指状态发生改变的列表，从无到有或从有到无
4. targetToushes[0]，得到触摸DOM元素的第一个手指的信息
5. 手指离开屏幕时，就没有touches和targetTouches，但是会有changedTouches

6.classList

• 返回元素类名

1. classList.add(’’)，添加类名
2. classList.remove(’’)，删除类名
3. classList.toggle(’’)，切换类名
4. classList.contains(’’)，判断是否包含类名，返回true或false

7.本地存储

• 本地存储特性：
  1. 数据存储在用户浏览器中
  2. 设置、读取方便、甚至页面刷新也不会丢失数据
  3. 容量较大，sessionStorage约5M，localStorage约20M
  4. 只能存储字符串，可以将对象JSON.stringify()编码后存储

7.1sessionStorage

1. 生命周期为关闭浏览器窗口
2. 在同一个窗口（页面）下数据可以共享
3. 以键值对的形式存储使用 值一定是字符串

7.2localStorage本地存储

1. 生命周期永久生效，除非手动删除
2. 最大存储20M
3. 同一域名下，数据可以共享

• 相关方法
  1. localStorage.setItem(key,value) ，存储数据
  2. localStorge.getItem(key) ，获取数据
  3. localStorage.removeItem(key) ，删除数据
  4. localStorage.clear()，清空数据

8.相关案例代码

• 动画原理

		//函数封装，obj目标对象，target目标位置
        //给不同元素指定不同定时器
        function animate(obj, target,callback) {
            //当我们不断点击按钮，元素的速度会越来越快，因为开启了太多定时器
            //解决方案：先清除之前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer,);
            obj.timer = setInterval(function () {
                if (obj.offsetLeft >= target) {
                    // obj.style.backgroundColor = 'red';
                    clearInterval(obj.timer);
                    callback && callback();
                };
                obj.style.left = obj.offsetLeft + 4 + 'px';
            }, 50);
        };
        var div = document.querySelector('div');
        var span = document.querySelector('span');
        var btn = document.querySelector('button');
        animate(div, 300,function(){
            div.style.backgroundColor = 'red';
            // alert(123)
        });
        btn.addEventListener('click',function(){
            animate(span, 200);
        })

• pc端轮播图

		var box = document.querySelector('.box');
        var left = document.querySelector('.left');
        var right = document.querySelector('.right');
        var ul = box.querySelector('ul');
        var ol = box.querySelector('.pagination');
        var boxWidth = box.offsetWidth;
        //1、左右箭头显示与隐藏
        box.addEventListener('mouseover', function () {
            left.style.display = 'block';
            right.style.display = 'block';
            clearInterval(timer);
        });
        box.addEventListener('mouseout', function () {
            left.style.display = 'none';
            right.style.display = 'none';
            autoLun();
        });
        //2、动态生成小圆圈  小圆圈数量和图片一样
        for (var i = 0; i < ul.children.length; i++) {
            var li = document.createElement('li');
            //通过自定义属性记录当前小圆圈的索引号
            // li.setAttribute('data-index', i);
            li.index = i;
            ol.appendChild(li);
            //3、小圆圈的排他思想  点击时添加类名，在生成小圆圈的同时添加
            li.addEventListener('click', function () {
                for (var j = 0; j < ol.children.length; j++) {
                    ol.children[j].className = '';
                }
                this.className = 'current';
                //4、点击小圆圈，移动图片  移动的是ul
                //ul移动的距离是小圆圈的索引号×图片的宽度，是负值
                // var index = this.getAttribute('data-index'); //点击某个li，得到它的索引号
                var index = this.index;
                num = circle = index;
                animate(ul, -index * boxWidth);
            })
        };
        ol.children[0].className = 'current';
        //5、克隆第一张图片，放在最后面,小圆圈不会多一个
        var first = ul.children[0].cloneNode(true);
        ul.appendChild(first);
        //6、点击右侧按钮，图片滚动一张
        var num = 0;
        var circle = 0; //声明一个全局变量，控制小圆圈的播放
        //下一张
        right.addEventListener('click', function () {
            //如果走到了最后一张，ul的left快速复原到0
            if (num == ul.children.length - 1) {
                num = 0;
                ul.style.left = 0;
            };
            num++;
            animate(ul, -num * boxWidth);
            //7、点击右侧按钮，小圆圈跟随一起变化
            circle++;
            if (circle == ol.children.length) { //如果小圆圈走到最后一张，就复原到第一个
                circle = 0;
            };
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            };
            ol.children[circle].className = 'current';
        });
        //上一张
        left.addEventListener('click', function () {
            //如果走到了最后一张，ul的left快速复原到0
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * boxWidth + 'px';
            };
            num--;
            animate(ul, -num * boxWidth);
            //7、点击右侧按钮，小圆圈跟随一起变化
            circle--;
            if (circle < 0) { //如果小圆圈走到最后一张，就复原到第一个
                // circle = ol.children.length-1;
                circle = circle < 0 ? ol.children.length - 1 : cirle;
            };
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            };
            ol.children[circle].className = 'current';
        });
        var timer = null;
        function autoLun(){
            timer = setInterval(function(){
                right.click();
        },2000);
        }
        autoLun();

• 移动端轮播图

		var box = document.querySelector('.box');
        var ul = document.querySelector('.box ul');
        var w = box.offsetWidth;
        var ol = document.querySelector('.box ol');
        var index = 0;
        //自动轮播
        var timer = setInterval(function () {
            index++;
            var translateX = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = `translateX(${translateX}px)`;
        }, 2000);
        //过渡完成之后，再去判断，添加监听过渡完成的事件
        ul.addEventListener('transitionend', function () {
            //无缝滚动
            if (index >= ul.children.length - 2) {
                index = 0;
                ul.style.transition = 'none'; //去掉过渡效果，让ul快速跳到目标位置
                // var translateX = -index * w;
                ul.style.transform = `translateX(0px)`;
            } else if (index < 0) {
                index = ul.children.length - 3;
                ul.style.transition = 'none'; //去掉过渡效果，让ul快速跳到目标位置
                var translateX = -index * w;
                ul.style.transform = `translateX(${translateX}px)`;
            };
            //小圆点跟随变化
            ol.querySelector('.current').classList.remove('current');
            ol.children[index].classList.add('current');
        });
        //手指划动轮播图
        var startX = 0;
        var moveX = 0;
        var flag = false;
        ul.addEventListener('touchstart', function (e) {
            startX = e.targetTouches[0].pageX; //触摸屏幕，获取手指初始坐标
            clearInterval(timer); //手指触摸时，停止定时器
        });
        //移动手指，计算手指的滑动距离，并且移动盒子
        ul.addEventListener('touchmove', function (e) {
            flag = true;
            moveX = e.targetTouches[0].pageX - startX; //移动的距离
            var translateX = -index * w + moveX;
            ul.style.transition = 'none';
            ul.style.transform = `translateX(${translateX}px)`;
            e.preventDefault();
        });
        //手指离开时，判断上一张或下一张
        ul.addEventListener('touchend', function (e) {
            if (flag) {
                if (Math.abs(moveX) > 50) {//判断移动像素是否大于50
                    if (moveX > 0) {//
                        index--;
                    } else {
                        index++;
                    }
                    var translateX = -index * w;
                    ul.style.transition = 'all .3s';
                    ul.style.transform = `translateX(${translateX}px)`;
                } else {
                    var translateX = -index * w;
                    ul.style.transition = 'all .3s';
                    ul.style.transform = `translateX(${translateX}px)`;
                };
            }
            clearInterval(timer); //手指松开后继续自动轮播
            timer = setInterval(function () {
                index++;
                var translateX = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = `translateX(${translateX}px)`;
            }, 2000);
        })

• 记住用户名

		var username = document.querySelector('#username');
        var remember = document.querySelector('#remember');
        if(localStorage.getItem('username')){
            usewername.value = localStorage.getItem('username');
            remember.checked = true;
        };
        remember.addEventListener('change',function(){
            if(this.checked){
                localStorage.setItem('username',username.value);
            }else{
                localStorage.removeItem('username');
            };
        });