用js写的旋转木马，在新年献给各位刚登基的皇帝，让你的后宫转起来！程序员就是可以为所欲为！

文末

逆水行舟不进则退，所以大家要有危机意识。

同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

前端面试题汇总

function init(){

for(var i=1;i<=img_num;i++){

var div = document.createElement(“div”);

div.id=“div_”+i;

var borderColor = ‘#’ + Math.random().toString(16).substr(2, 6).toUpperCase();

div.style.border='3px solid '+borderColor;

div.style.borderRadius=‘8px’;

div.addEventListener(‘click’,check);

//加入图片

var img = document.createElement(“img”);

img.src=“…/images/2/”+i+“.jpg”;

div.appendChild(img);

div_box.appendChild(div);

boxQuene.push(div);//一个个的推入到盒子队列

}

//第一次设置卡片样式

reset();

//定时向右翻

autoMove();

}

var left=0,top=50,c_top,zIndex=0,width=262,height=389,first,last,opacity;

//重新设置卡片的样式

function reset(){

zIndex=0;

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

var obj = boxQuene[i];

width=262,height=389,c_top=0;

//判断是否要放到最后面的

if(i<middle_num-2){

first=true;

last=false;

}else if(i>middle_num){

first=false;

last=true;

}else{

first=false;

last=false;

}

if(i<middle_num){

zIndex++;

if(first){//放到最后的

left=50;

c_top=-30;

opacity=0.03

}else if(i==middle_num-1){//中间要突出显示的

left=190;

width+=40;

height+=56;

c_top=30;

opacity=1

}else{

left=10

opacity=0.4

}

}else{

zIndex–;

if(last){//放到最后的

left =360;

c_top=-30;

opacity=0.03

}else{

left =400;

opacity=0.4

}

}

obj.style.zIndex=zIndex;

obj.children[0].id=i;

obj.style.opacity=opacity;

//使用自己封装的动画函数

(function(o){

var o_width=width+‘px’,o_height=height+‘px’,o_left=left+‘px’,o_top=top+c_top+‘px’,index=i;

var param = {‘width’: o_width,‘height’: o_height,‘left’: o_left,‘top’: o_top};

animate(o,param,‘fast’);

})(obj);

}

}

//选中图片事件函数

function check(e){

var e = e || window.event;

var target = e.target || e.srcElement;

if(target.id){

//找到当前点击的目标

var cur = boxQuene.filter(function(item){

return target.id==item.children[0].id;

})

var curIndex = parseInt(/\d+/.exec(cur[0].children[0].id)[0]);

if(curIndex===middle_num-1){

return;

}else{

moveQuene(curIndex);

}

reset();

}

}

//鼠标移入

function over(){

leftSpan.style.opacity=1;

rightSpan.style.opacity=1;

clearInterval(timmer);

}

//鼠标移出

function out(){

leftSpan.style.opacity=0;

rightSpan.style.opacity=0;

autoMove();

}

//移动队列

function moveQuene(curIndex){

var step = middle_num-1-curIndex;

if(step>0){

while(step>0){

//取到队列最后一个元素，插入到最前面

boxQuene.unshift(boxQuene.pop());

step–;

}

}else{

step = Math.abs(step);

while(step>0){

//取到队列第一个元素，插入到最后面

boxQuene.push(boxQuene.shift());

step–;

}

}

}

//获取属性值

function getStyle(obj, prop) {

var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;

return prevComputedStyle[prop];

}

/*

obj:dom对象

prop:动画参数

speed:执行速度 fast slow 3000等

func:回调函数

*/

function animate(obj,prop,speed,func){

//防止重复动画事件

if(obj.timer) return ;

//定义定时器执行次数和总执行时间

var limit=20,totalTime;

if(typeof speed===‘number’){//如果传入的是

totalTime = speed;

}else if(speed===‘slow’){

totalTime = 600;

}else if(speed===‘fast’){

totalTime = 200;

}else{

totalTime = 400;

}

var time = totalTime/limit;

var n=0,cache={},display,primary_cur;//cache用来缓存，省的每次都去dom获取

obj.timer = setInterval(function(){

n++;//执行次数每次递增

for(var p in prop){

if(“display”===p) {

display = prop[“display”];

if(display!==‘none’){

obj.style[‘display’] = display;

}

delete prop[“display”];

continue;

}

//判断是否是可以递增的属性，如果不是则直接让它生效，并从prop中删除，删除后就不用每次任务都执行它

var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性

if(!reg.test(prop[p])){

obj.style[p] = prop[p];

delete prop[p];

continue;

}

var value,opacityFlag=(p == “opacity”)?true:false;

var cur = 0;

if(cache[p+“_cur”]){//从缓存中取

cur = cache[p+“_cur”];

value = cache[p+“_value”];

}else{

value = prop[p];

if(opacityFlag) {

//如果本来是隐藏的则cur默认就是0

if(getStyle(obj, ‘display’)!==‘none’){

cur = Math.round(parseFloat(getStyle(obj, p)) * 100);

}

} else {

cur = parseInt(getStyle(obj, p));

//处理100px的格式

(typeof value===‘string’) && (value=value.replace(/px$/,“”));

}

primary_cur=cur;

cache[p+“_value”] = value;

}

var incre ;

if(cache[p+‘_increment’]){//如果缓存中有则从中取

incre = cache[p+‘_increment’];

}else{

if(opacityFlag){

incre = (value*100-cur)/limit;//计算每次变化值

}else{

incre = (value-cur)/limit;//计算每次变化值

}

cache[p+‘_increment’]= incre;

}

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

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

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整