一、选择题
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值。