Web API学习笔记 day05、06、07

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');
            };
        });
上一篇:获取元素


下一篇:R语言机器学习系列-决策树回归代码