BOM你真的了解吗？，墙裂推荐，web开发重点

步标整除

• 需求：在规定时间内让元素走到规定的结束位置，时间间隔可以更改

• 例如：让元素在2秒钟内，left属性从 0 走到 500px

• 解决方法：

• 总距离 == 步长 * 次数

• 时间间隔自定义，总时长固定

• 求出总次数 = 总时间 / 时间间隔

• 定义计数器变量，每执行一次定时器函数增加计数1，直到执行达到总次数，停止定时器

// 获取元素

var start = document.getElementById(“start”);

var box = document.getElementById(“box”);

// 已知 开始位置、结束位置、总时长、时间间隔

// 总距离 = 步长 * 总次数

// 总距离 = 结束位置 - 起始位置 ，已知可以求出来

// 总次数 = 总时长 / 时间间隔 ，已知可以求出来

// 步长 = （结束位置 - 起始位置） / （总时长 / 时间间隔）

// 信号量 ,也相当于初始值

var nowLeft = 200;

// 结束位置

var endLeft = 500;

// 总时长

var time = 1000;

// 时间间隔

var interval = 50;

// 运算总次数

var maxcount = time / interval;

// 运算出每一次的步长

var step = (endLeft - nowLeft) / maxcount;

// 定义一个次数的累加器

var count = 0;

// 准备条件结束可以开始定时器了

var timer;

start.onclick = function () {

timer = setInterval(function () {

// 让元素的属性每一次变化一个步长

nowLeft += step;

// 每运动一次让次数累加器加 1

count++;

// 停止定时器

if (count >= maxcount) {

// 拉终停表

nowLeft = endLeft;

clearInterval(timer);

}

// 给属性赋值

box.style.left = nowLeft + “px”;

},interval);

};

封装动画函数

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

but.onclick = function () {

animate(box, {

left: 400,

width: 300,

height: 200,

opacity: 1

}, 2000);

}

function animate(ele, end, time) {

// 起始位置的对象，需要先定义一个空对象

var now = {};

// end 对象遍历，获取属性名

for (var k in end) {

now[k] = parseFloat(window.getComputedStyle(ele)[k]);

}

// 自定义时间间隔

var interval = 50;

// 计算总次数

var maxCount = time / interval;

// 次数累加器

var count = 0;

// 对象中的每个属性都有自己的步长，也可以放到一个步长对象中

var step = {};

// 遍历结束对象，计算每个属性的步长

for (var k in end) {

step[k] = (end[k] - now[k]) / maxCount

}

// 定时器

var timer;

timer = setInterval(function () {

// 每个属性发生变化，赋值给now对象中的每一项

for (var k in end) {

now[k] += step[k];

};

// 累计运动次数

count++;

// 判断定时器是否结束

if (count >= maxCount) {

// 拉终停表

for (var k in end) {

now[k] = end[k];

};

clearInterval(timer);

}

// 赋值给对应元素对象属性

for (var k in now) {

if (k === ‘opacity’) {

ele.style[k] = now[k]

} else {

ele.style[k] = now[k] + “px”

}

};

}, interval)

}

location对象

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

• location 对象是 window 对象下的一个属性，使用的时候可以省略 window 对象

• location 可以获取或者设置浏览器地址栏的 URL

URL了解

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

• 统一资源定位符（Uniform Resource Locator, URL）

• URL的组成：scheme://host:port/path?query#fragment

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM3OTAzNDY4,size_16,color_FFFFFF,t_70)