哔哩哔哩2018校招前端笔试

作者 XiongQi 日期 2017-10-13
原创 笔试 JavaScript
哔哩哔哩2018校招前端笔试

前言

前几日，哔哩哔哩在电子科大清水河校区举行了校招宣讲会。B站不用多说，中国最大的同性交友网站😄，不去工作也能去看看。
当晚便进行了部分笔试，下面是我参加的前端笔试试题和我自己的解答，分享给大家。

第一题

1
给定一个整数数组，找到具有最大和的子数组，返回最大和。

比较常见，直接给我的解答： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// es6
function (arr) {

	//全为负数的情况，要注意
    if (arr.every(x => x < 0)) {
        return arr.sort()[0];
    }

    var max = 0;
    var sum = 0;
    for (let i of arr) {
        sum += i;
        if (max < sum)
            max = sum;
        if (sum < 0)
            sum = 0;
    }
    return max;

第二题

1
2
3
4
5
要求:
1. 构建一个n*n的格子(n从输入框填写) ,默认背景色都是白色,鼠标指针指上去的格子底色要变
成红色,鼠标移出时复原
2. 鼠标点击格子时背景色固定为蓝色,指针hover时也不变红。再次点击时复原成未点击的状态
3. 格子大小可用css控制,底色变化用js实现

个人思路如下：

1. 创建n*n的表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!-- html部分 -->
<input id="in" type="text" placeholder="输入n">
<button onclick="createTable()">确认n</button>
<br><br>

<!-- css -->
<style>
td{
	width:20px;
	height:20px;
	border:1px solid;		
}
</style>

<!-- js -->
<script>
// 创建n*n表格
function createTable(){
	var n=document.getElementById("in").value;

	//创建n*n的"table"
	var str="<tbody>";
	for(var i=0;i<n;i++){
		str+="<tr>";
		for(var j=0;j<n;j++){
			str+="<td></td>";
		}
		str+="</tr>";
	}
	str += "</tbody>";
	var table = document.createElement("table");
	table.innerHTML = str;

	table.setAttribute("cellspacing", 0);//消除表格间的间距
	document.body.appendChild(table);

	//调用事件函数，传入表格
	colorEvent(table);
}
</script>

2. 颜色变化效果

使用事件委托。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<script>
//mouseover与mouseout
//不论鼠标指针穿过被选元素或其子元素，都会触发与mouseout。

//mouseenter与mouseleave
//只有在鼠标指针离开被选元素时，才会触发与mouseout。

function colorEvent(table) {	
	//指针hover，out以及click监听
	table.addEventListener("mouseover", colorHover, false);
	table.addEventListener("mouseout", colorOut, false);
	table.addEventListener("click", colorClick, false);

	function colorHover(ev) {
		var e = ev || window.event;
		var target = e.target || e.srcElement;
		if (target.tagName == "TD" && target.style.background != "blue") {
			target.style.background = "red"; //注意"tagName"为大写，写小写"td"会失败
		}
	}
	function colorOut(ev) {
		var e = ev || window.event;
		var target = e.target || e.srcElement;
		if (target.tagName == "TD" && target.style.background != "blue") {
			target.style.background = "white";
		}
	}
	function colorClick(ev) {
		var e = ev || window.event;
		var target = e.target || e.srcElement;
		if (target.tagName == "TD") {
			target.style.background = (target.style.background == "blue" ? "white" : "blue");
		}
	}
}
</script>

其实此题如果使用jQuery会比较方便，其大致思路如下： 

1
2
3
4
5
6
7
$(document).ready(function(){
	$("#t").hover(function(){
		$("#t").css("background-color","red");
	},function(){
		$("#t").css("background-color","white");
	});
});

3. 源代码

哔哩哔哩笔试第三题.html

第三题

此题为还原一张图上的设计，此处无图就不叙述了。

第四题

题目：高铁的玻璃需要有一定的防撞击强度,可以通过不同时速的铝弹撞击玻璃实际测试,可测出不会被击穿的最大时速。现在有两块强度未知的玻璃需要实验验证防撞击最大时速,假设不会被击穿时玻璃都完好无损可以继续实验使用, 一旦被击穿则不能继续使用。如何通过这两块玻璃,用尽量少的实验次数验证出防撞击的最大时速。(可以有微小误差,两块玻璃都可以被击穿)
题有点长，我的思路是使用类似于计算机网络拥塞控制的方法，使用先指数增后线性增长的方法。
（使用1,2,3表示时速等级，等级越高，时速越快）

  1. 使用 2^n 级时速依次测试玻璃1（n=0,1,2...）。
  2. 假设 2^m 级时速时穿过玻璃1，记录下当前的时速间隔：( 2(m-1),2m )。
  3. 从 2^(m-1) 开始依次加1级测试玻璃2，直至测出最大时速。

原创文章，如需转载，希望注明出处：
转自 XiongQi's Blog：哔哩哔哩2018校招前端笔试 — https://catshub.github.io/2017/10/13/bili/

TAGS
原创 笔试 JavaScript