2020-10-19（JS收官答题卡）

一、选择题

C D D B C

二、填空题

1. 浏览器对象模型 浏览器
2. back()
3. for
4. forEach
5. newTop >= document.documentElement.clientHeight - dom.clientHeight

三、大题

1.代码如下

  var arr = [{
            name: 'cst',
            age: '18'
        }, {
            name: 'jc',
            age: '20'
        }, {
            name: 'dxm',
            age: '50'
        }, {
            name: 'dcg',
            age: '30'
        }]

        var newArr = arr.filter(function(ele,index,self){
            if(ele.name.includes('c')){
                return true;
            }else{
                return false;
            }
        })
        var addArr = arr.map(function(ele,index,self){
            ele.age = parseInt(ele.age)*2;
            return ele.age;
        })
        console.log(newArr,addArr);

2.字符串学的不扎实，没想出来
3.代码如下

function getDom(str){
            var type = str.type;
            var value = str.value;

            // 空的数组来进行存储最终要返回的结果，id是一个值，tagname或者是classname可能是多个值
            var resArr = [];

            var fn = null;
           

            // 下面根据不同的值进行判断
            if(type =='tag'){
                fn = function(dom){
                    if(dom.tagName == value.toUpperCase()){
                        resArr.push(dom);
                    }
                }
            }else if(type == 'class'){
                fn = function(dom){
                    if(dom.className == value){
                        resArr.push(dom);
                    }
                }

            }else if(type == 'id'){
                fn = function(dom){
                    if(dom.id == value){
                        resArr.push(dom);
                    }
                }

            }

            travelDom(document.body,fn);

            console.log(resArr);
        }
        // 首先我们需要对整个html文档进行遍历查找到每一个元素
        // 第一个参数是需要进行在这个dom元素下面进行匹配
        // 第二个参数是匹配的方法函数
        function travelDom(dom,fn){
            fn(dom);
            var  children = dom.children;
            for(var i=0;i<children.length;i++){
                // 通过递归来获取到每一个子元素
                travelDom(children[i],fn);
            }
        }

        getDom({type:'tag',value:'div'});

4.缓冲运动的效果就是在dom元素进行移动到目标点的时候，他的速度会根据自身距离目标点的距离进行动态的减小，当最终运动到目标点附近的时候进行判断，停止定时器，并且手动将dom元素移动到相对应的target位置。
5.轮播图的制作思路：
1.首先应该提到的是html+css，应该有一个可视区域wrapper，里面有一个轮播的内容区域ul，ul里面是轮播的元素，第二个是左右两边的按钮，第三个是下面的索引值。其中wrapper使用margin来使得整体在中部，并且实现轮播的逻辑应该是ul相对于wrapper进行定位之后，不断地改变ul的offsetleft来改变。
在设置li的时候应该是需要轮播的图片数目加一，加一的目的是无论是从左到右的轮播还是从右到左的轮播，都可以通过最后一张新增加的图片作为介质来进行运动
2. 首先应该实现的功能应该是自动轮播，或者说是一个默认的轮播效果，每次进行自动轮播的时候，调用startMove函数，里面传入三个值，一个是移动的dom元素，另外一个是需要移动的属性及其相对应值，当每一次进行从左向右轮播的时候，我们每次将ul的offsetLeft向左移动一个小的li的offsetwidth，这个时候需要在回调函数中进行一个判断，当移动到最后一张图片的时候，我们需要多添加第一张图片，然后在移动到最后一张图片的时候，将ul的offsetleft设置为初始的值，这样就可以在下一张的时候刚好移动到第二张图片，从而实现了轮播图的无缝衔接。（这个是基本的，就是在不点击左右按钮或者是索引的时候）
3. 从右到左进行轮播的逻辑是：判断是不是第一张（因为如果是第一张图片的话就会出现空白），这时候我们需要移动最后一张图片sliderPage.style.left = -num * moveWidth + 'px';，然后执行startmove函数，每次将ul的offsetLeft加上一个li的宽度。记得在从左到右和从右到左的最后一步都要改变index来改变索引的样式。
4. 这是实现索引，索引要实现的是两个方面，一个是根据当前的li来进行索引的移动，另一个是点击索引可以进行轮播的切换，所以说我们在为每一个span索引进行绑定点击的时候要保存索引值，然后每次通过索引值改变ul的left值。