嗶哩嗶哩2018校招前端筆試

前言

前幾日，嗶哩嗶哩在電子科大清水河校區舉行了校招宣講會。B站不用多說，中國最大的同性交友網站，不去工做也能去看看。
當晚便進行了部分筆試，下面是我參加的前端筆試試題和我本身的解答，分享給你們。
博文地址：嗶哩嗶哩2018校招前端筆試

第一題

給定一個整數數組，找到具備最大和的子數組，返回最大和。

比較常見，直接給個人解答：

// 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. 構建一個n*n的格子(n從輸入框填寫) ,默認背景色都是白色,鼠標指針指上去的格子底色要變
成紅色,鼠標移出時復原
2. 鼠標點擊格子時背景色固定爲藍色,指針hover時也不變紅。再次點擊時復原成未點擊的狀態
3. 格子大小可用css控制,底色變化用js實現

我的思路以下：

1. 建立n*n的表格

<!-- 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. 顏色變化效果

使用事件委託。

<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會比較方便，其大體思路以下：

$(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),2^m )。
3. 從 2^(m-1) 開始依次加1級測試玻璃2，直至測出最大時速。