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

一、选择题

C D D B C

二、填空题

浏览器对象模型浏览器
back()
for
forEach
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值。