第一天面试题

1.闭包操作

题目在for里面每一秒执行一次打印0-4的数字，不能使用let
for(var i=0;i<5;i++){
	(function(i){
		setTimeout(function(){
			console.log(i+"秒");
		},i*1000)
	})(i)
}

2.div加阴影+渐变+圆角

<button class="show">按钮</button>
<style>
   .show{
        box-shadow: 0px 1px 5px #4a4a4a;
        background-image: linear-gradient(red, yellow);
		border-radius:5px;
    }
</style>

3.父节点为宽高120px，子节点图片比父节点小需要垂直居中，水平居中

第一种方法 绝对定位
<div style="width:120px;height:120px;background:red;position:relative" >
	<image src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="width:50px;height:50px" class="img"></image>
</div>
<style>
.img{
	position: absolute; 
	left:35px; 
	top: 35px;
}
</style>

第二种 flex
<div class="imgDiv" >
	<image src="https://www.baidu.com/img/baidu_jgylogo3.gif"></image>
</div>
<style>
.imgDiv{
	width:120px;
	height:120px;
	background:red;
	display:flex;
	justify-content:center
	align-items:center
}
</style>	

第三种 line-height+inline-block
<div style="text-align: center; width: 500px;height:200px; line-height:200px;">
   <img alt="" src="https://www.baidu.com/img/baidu_jgylogo3.gif" style="display: inline-block; vertical-align: middle;" />
</div>

4.如何判断当前实例是jquery？如何判断当前实例是vue？

jquery
const a = $("div")
if(a instanceof jQuery){
	console.log(true);
}
vue

const vue = new Vue()
if(vue._isVue){
	console.log(true);
}

5.随机生成10000个不重复的8位数，选出后4为的靓号AAAA,AABB,ABAB并且后四位不含4

const codeLength = 8;
let ar = [];
let ababar = [];
let aaaaar = [];
let aabbar = [];
while(ar.length != 10000){
	let code = '';
	for(let i=0;i<codeLength;i++){
		const num = Math.floor(Math.random()*9);
		code += num;
	}
	if(ar.indexOf(code) <= -1){
		ar.push(code);
	}
}
for(let i=0;i<ar.length;i++){
	let abab = new RegExp("(\\d)((?!\\1)\\d)\\1\\2", "g");
	let aaaa = new RegExp('(.)\\1{3}', "g");
	let aabb = new RegExp("(\\d)\\1((?!\\1)\\d)\\2", "g");
	if(ar[i].substr(-4).indeof('4') > -1) continue
	if (ar[i].substr(-4).match(abab) != null) {
		ababar.push(ar[i]);
	}else if (ar[i].substr(-4).match(aaaa) != null) {
	    aaaaar.push(ar[i]);
	}else if (ar[i].substr(-4).match(aabb) != null) {
	    aabbar.push(ar[i]);
	}
}
console.info(ar);
console.info(ababar);
console.info(aaaaar);
console.info(aabbar);

6.将url后面的参数转换成对象形式

var str = "http://localhost:3000/index.html?phone=12345678901&pwd=123123";
var url = str.split("?");
var result = url[1].replace(/&/g, '","').replace(/=/g, '":"');
var reqDataString = '{"' + result + '"}';
console.log(JSON.parse(reqDataString)); 

7.将代码中{{id}}转换为数据中对应的值

例子
<div id="abc">{{msg}}+u{{id}}</div></div>
转换成
<div>你好+u123456</div>

数据
const data = {id:123456,msg:"你好"}

我写的代码是
let template = document.getelementById("abc");
var view = Mustache.render(template.innerHTML, data );
template.innerHTML = view;

8.对dom的创建，添加、修改字体颜色、删除

let div = document.createElement('div');
var span = document.createElement("span");  
span.innerHTML = "1111111111";
div.appendChild(span);  
span.style.color="red";
document.body.appendChild(div); 
body.removeChild(div);

9.使用transform生成叉号和三号

<div class="menu"></div>
<div class="close"></div>
<style>
.menu{
	width:25px;
	height:5px;
	background:black;
	position:relative;
	margin: 50px auto;
}
.menu::before{
	position:absolute;
	top:-8px;
	content:' ';
	width:25px;
	height:5px;
	background:black;
}

.menu::after{
	position:absolute;
	bottom:-8px;
	content:' ';
	width:25px;
	height:5px;
	background:black;
}
.close{
	width:40px;
	height:40px;
	position:relative;
}
.close::before,
.close::after{
	content:' ';
	width:1px;
	height:40px;
	position:absolute;
	left:19px;
	background:red;
}
.close::before{
	transform:rotate(45deg)
}
.close::after{
	transform:rotate(-45deg);
}
</style>

10.js作用域问题
忘记具体题目了

面试总结：
难受啊！！！！ 连笔试都没有通过，里面的题都知道应该怎么去写但是里面需要用到的关键字都忘记，最后就写了几道题，连面试都没有机会！！！！！！！！！！

办公环境：一般
路程：乘坐地铁需要1个小时