本文详细探讨了JavaScript的基础知识，包括常见JS特效如鼠标坐标显示、轮播图实现，以及深入讲解了原型、原型链、闭包、作用域链等核心概念。还涉及了异步编程、事件循环、数据类型检测和数组方法等，是前端面试的必备复习资料。
文章目录
-
- 常见JS特效
- 1、在页面的盒子中显示鼠标坐标
- 2、滚动条的距离
- 3、动画函数的封装
- 4、轮播图的实现
- 5、图片放大效果
- 6、点击Tab栏的切换
- 7、精灵图的使用
- 8、字体图标的使用
- <一>构造函数、原型对象、原型链、原型
- 1、如何理解原型和原型链
- 2、prototype的修改和重写
- 3、原型链的指向问题
- 4、原型链的终点
- 5、如何获取对象非原型链上的属性`hasOwnProperty`
- <二>、闭包、作用域链、执行上下文
- 1、闭包
- 2、函数执行顺序的问题
- <三>、JS基础
- 1、数组原生的方法
- 2、常见的位运算符有哪些
- 3、JS为什么进行变量提升，导致了什么问题
- 4、use strict 是什么意思？用了之后有什么区别
- 5、JS是单线程还是多线程，为什么？
- 6、JS如何实现多线程的
- 7、ajax和axios的区别和联系
- 7、JS常见的数据类型
- 8、数据类型的检测方式
- 9、判断数组的方式有哪些
- 10、commonjs模块和ES6 modules有哪些区别？
- <五>、函数的this/apply/call/bind
- 1、this的问题
- 2、call()和apply()的区别
- 3、call() apply()bind() 方法的实现
- <六>、如何在vue中引入自己的JS文件
- <七>、异步编程的问题
- 1、实现异步编程的方式
- 2、对promise的理解
- 3、promise解决的问题
- 4、settimeout setinterval requestAnimationFrame的区别
- 5、setTimeout、promise、async/await的区别
- 6、await等的啥
- 7、async和await的优势
- 8、async如何捕获异常
- <八>、JS的继承
- 1、实现继承的两种方式
- <九>、面向对象
- 1、创建对象的方式有哪些
- <十>、垃圾回收和内存泄露
- 1、垃圾回收
- 2、内存泄露
- 9、什么是 回调函数？
- <十一>、并发和并行
常见JS特效
1、在页面的盒子中显示鼠标坐标
思路：鼠标在盒子中的坐标等于鼠标在页面中的坐标(e.pageX)减去盒子在页面中的坐标(div.offsetLeft)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
margin: 100px auto;
}
</style>
</head>
<body>
<div class="div"></div>
<script>
var div = document.querySelector(".div")
div.addEventListener("mousemove", function(e) {
var x = e.pageX - this.offsetLeft
var y = e.pageY - this.offsetTop
div.innerHTML = "X的坐标是" + x + "Y的坐标是" + y
})
</script>
</body>
</html>
2、滚动条的距离
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color:pink;
overflow: auto;
}
</style>
</head>
<body>
<div>我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
</div>
<script>
var div = document.querySelector('div');
console.log(div.scrollHeight); //返回的是实际高度 包括盒子的高度加上隐藏内容的高度 不带单位 283
console.log(div.clientHeight); //返回的是 盒子高度 不带单位 200
div.addEventListener('scroll', function() {
console.log(div.scrollTop); //返回被卷上去的 高度 滚到最下边的时候就是83px，所以上边的scrollHeigh是200+83等于283px，不带单位。
})
</script>
</body>
</html>
3、动画函数的封装
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: 200px;
height: 200px;
background-color:pink;
}
span {
position: relative;
display: block;
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<span>夏雨荷</span>
<script>
//为啥刚开始不动呢 因为忘记加定位了
//原理：首先获得该盒子的当前位置 然后在此基础上不断加1（利用定时器完成这个操作） 再给定一个结束定时的条件（清除定时器）
var div = document.querySelector('div');//这个得是 全局变量 下边才可以调用
var span = document.querySelector('span');
function animate(obj, target) {
var timer = setInterval(function() {
if ( obj.offsetLeft >= target) {
//到了设定值之后，清除定时器，盒子最终就停在offsetLeft=400px的距离上。
clearInterval(timer);
}
//盒子的左侧距离页面的距离不断加 5px。
obj.style.left = obj.offsetLeft + 5 + 'px';
}, 30)
}
animate(div, 400);
animate(span,300);
</script>
</body>
</html>
4、轮播图的实现
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>品优购-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>
<meta name="description" content="品优购" />
<meta name="Keywords" content="品优购" />
<style>
/*清除元素默认的内外边距 */
* {
margin: 0;
padding: 0
}
/*让所有斜体 不倾斜*/
em,
i {
font-style: normal;
}
/*去掉列表前面的小点*/
li {
list-style: none;
}
/*图片没有边框 去掉图片底侧的空白缝隙*/
img {
border: 0; /*ie6*/
vertical-align: middle;
}
.main {
width: 980px;
height: 455px;
margin-left: 219px;
margin-top: 10px;
}
.focus {
position: relative;
width: 721px;
height: 455px;
background-color: purple;
overflow: hidden;
}
.focus ul {
/* 为了使用动画函数 */
position: absolute;
top: 0;
left: 0;
/* 这是为了放有四张图片的ul能放得下 所以设置为父盒子宽度额600%即六倍 */
width: 600%;
}
.focus ul li {
/* 为了让li在一行显示 */
float: left;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
</style>
</head>
<body>
<!-- main 模块 -->
<div class="w">
<div class="main">
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
<
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> > </a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="circle"></ol>
</div>
</div>
</div>
<script>
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
window.addEventListener('load', function() {
// 1. 获取元素
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
// 2. 鼠标经过focus 就显示隐藏左右按钮 并且清除图片自动播放效果
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null; // 清除定时器变量 释放空间
});
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function() {
//鼠标离开时 开启自动播放轮播图功能
//手动调用点击事件
arrow_r.click();
}, 2000);
});
// 3. 动态生成小圆圈 有几张图片，我就生成几个小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
// console.log(ul.children.length);
for (var i = 0; i < ul.children.length; i++) {
// 创建一个小li
var li = document.createElement('li');
// 记录当前小圆圈的索引号 通过自定义属性来做
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 因为li是浮动的 所以不能移动li
// ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
// 当我们点击了某个小li 就拿到当前小li 的索引号
var index = this.getAttribute('index');
// 当我们点击了某个小li 就要把这个li 的索引号给 num 控制li
num = index;
// 当我们点击了某个小li 就要把这个li 的索引号给 circle 控制小圆圈
circle = index;
// num = circle = index;
//var focusWidth = focus.offsetWidth; 上边已经获取了
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.children.length - 1，此时 我们的ul 要快速复原 left 改为 0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num
最低0.47元/天 解锁文章
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
