Web APIs-Day6

li.setAttribute(‘index’, i);

// 把小li插入到ol 里面

ol.appendChild(li);

// 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件

li.addEventListener(‘click’, function() {

// 干掉所有人 把所有的小li 清除 current 类名

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].className = ‘’;

}

// 留下我自己 当前的小li 设置current 类名

this.className = ‘current’;

// 5. 点击小圆圈，移动图片 当然移动的是 ul

// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值

// 当我们点击了某个小li 就拿到当前小li 的索引号

var index = this.getAttribute(‘index’);

// 当我们点击了某个小li 就要把这个li 的索引号给 num

num = index;

// 当我们点击了某个小li 就要把这个li 的索引号给 circle

circle = index;

// num = circle = index;

console.log(focusWidth);

console.log(index);

animate(ul, -index * focusWidth);

})

}

// 把ol里面的第一个小li设置类名为 current

ol.children[0].className = ‘current’;

// 6. 克隆第一张图片(li)放到ul 最后面

var first = ul.children[0].cloneNode(true);

ul.appendChild(first);

// 7. 点击右侧按钮， 图片滚动一张

var num = 0;

// circle 控制小圆圈的播放

var circle = 0;

// flag 节流阀

var flag = true;

arrow_r.addEventListener(‘click’, function() {

if (flag) {

flag = false; // 关闭节流阀

// 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0

if (num == ul.children.length - 1) {

ul.style.left = 0;

num = 0;

}

num++;

animate(ul, -num * focusWidth, function() {

flag = true; // 打开节流阀

});

// 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放

circle++;

// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原

if (circle == ol.children.length) {

circle = 0;

}

// 调用函数

circleChange();

}

});

// 9. 左侧按钮做法

arrow_l.addEventListener(‘click’, function() {

if (flag) {

flag = false;

if (num == 0) {

num = ul.children.length - 1;

ul.style.left = -num * focusWidth + ‘px’;

}

num–;

animate(ul, -num * focusWidth, function() {

flag = true;

});

// 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放

circle–;

// 如果circle < 0 说明第一张图片，则小圆圈要改为第4个小圆圈（3）

// if (circle < 0) {

// circle = ol.children.length - 1;

// }

circle = circle < 0 ? ol.children.length - 1 : circle;

// 调用函数

circleChange();

}

});

function circleChange() {

// 先清除其余小圆圈的current类名

for (var i = 0; i < ol.children.length; i++) {

ol.children[i].className = ‘’;

}

// 留下当前的小圆圈的current类名

ol.children[circle].className = ‘current’;

}

// 10. 自动播放轮播图

var timer = setInterval(function() {

//手动调用点击事件

arrow_r.click();

}, 2000);

})

2.2 节流阀

---

防止轮播图按钮连续点击造成播放过快。

节流阀目的：当上一个函数动画内容执行完毕，再去执行下一个函数动画，让事件无法连续触发。

核心实现思路：利用回调函数，添加一个变量来控制，锁住函数和解锁函数。

开始设置一个变量var flag= true;

If(flag){flag = false; do something} 关闭水龙头；

利用回调函数动画执行完毕， flag = true 打开水龙头；

注：节流阀的核心就是声明一个布尔型变量记录动画完成的情况，在调用动画的回调函数里，将布尔型变量变为true，即将水龙头打开；

2.3 案例：返回顶部

---

1. 带有动画的返回顶部

2. 此时可以继续使用我们封装的动画函数

3. 只需要把所有的left 相关的值改为 跟 页面垂直滚动距离相关就可以了

4. 页面滚动了多少，可以通过 window.pageYOffset 得到

5. 最后是页面滚动，使用 window.scroll(x,y)

代码如下（示例）：

//1. 获取元素

var sliderbar = document.querySelector(‘.slider-bar’);

var banner = document.querySelector(‘.banner’);

// banner.offestTop 就是被卷去头部的大小 一定要写到滚动的外面

var bannerTop = banner.offsetTop

// 当我们侧边栏固定定位之后应该变化的数值

var sliderbarTop = sliderbar.offsetTop - bannerTop;

// 获取main 主体元素

var main = document.querySelector(‘.main’);

var goBack = document.querySelector(‘.goBack’);

var mainTop = main.offsetTop;

// 2. 页面滚动事件 scroll

document.addEventListener(‘scroll’, function() {

// console.log(11);

// window.pageYOffset 页面被卷去的头部

// console.log(window.pageYOffset);

// 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位

if (window.pageYOffset >= bannerTop) {

sliderbar.style.position = ‘fixed’;

sliderbar.style.top = sliderbarTop + ‘px’;

} else {

sliderbar.style.position = ‘absolute’;

sliderbar.style.top = ‘300px’;

}

// 4. 当我们页面滚动到main盒子，就显示 goback模块

if (window.pageYOffset >= mainTop) {

goBack.style.display = ‘block’;

} else {

goBack.style.display = ‘none’;

}

})

// 3. 当我们点击了返回顶部模块，就让窗口滚动的页面的最上方

goBack.addEventListener(‘click’, function() {

// 里面的x和y 不跟单位的 直接写数字即可

// window.scroll(0, 0);

// 因为是窗口滚动 所以对象是window

animate(window, 0);

});

2.4 案例：筋斗云案例

---

1. 利用动画函数做动画效果

2. 原先筋斗云的起始位置是0

3. 鼠标经过某个小li，把当前小li的offsetLeft 位置做为目标值即可

4. 鼠标离开某个小li，就把目标值设为 0

5. 如果点击了某个小li， 就把li当前的位置存储起来，做为筋斗云的起始位置

代码如下（示例）：

window.addEventListener(‘load’, function() {

// 1. 获取元素

var cloud = document.querySelector(‘.cloud’);

var c_nav = document.querySelector(‘.c-nav’);

var lis = c_nav.querySelectorAll(‘li’);

// 2. 给所有的小li绑定事件

// 这个current 做为筋斗云的起始位置

var current = 0;

for (var i = 0; i < lis.length; i++) {

// (1) 鼠标经过把当前小li 的位置做为目标值

lis[i].addEventListener(‘mouseenter’, function() {

animate(cloud, this.offsetLeft);

});

// (2) 鼠标离开就回到起始的位置

lis[i].addEventListener(‘mouseleave’, function() {

animate(cloud, current);

});

// (3) 当我们鼠标点击，就把当前位置做为目标值

lis[i].addEventListener(‘click’, function() {

current = this.offsetLeft;

});

}

})

三、触屏事件

=====================================================================

3.1 触屏事件概述

---

移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果，但是移动端也有自己独特的地方。比如触屏事件 touch（也称触摸事件），Android和 IOS 都有。

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作。

常见的触屏事件如下：

3.2 触摸事件对象（TouchEvent）

---

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

touchstart、touchmove、touchend 三个事件都会各自有事件对象。

3.3 案例：移动端移动元素

---

1. touchstart、touchmove、touchend可以实现拖动元素

2. 但是拖动元素需要当前手指的坐标值 我们可以使用 targetTouches[0] 里面的pageX 和 pageY

3. 移动端拖动的原理： 手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离

4. 手指移动的距离： 手指滑动中的位置 减去 手指刚开始触摸的位置

拖动元素三步曲：

总结

秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！

而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。

这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖 HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

资料截图 ：

高级前端工程师必备资料包