校招筆試題1

阿新 • • 發佈：2019-02-01

2018年9月5日

北京36氪筆試

1.實現一個滿屏的品字佈局效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    /*注意這裡不設定html的話，他的高度不能滿屏*/
    html, body {
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
    }
    header, section{
      width: 100%;
      height: 50%;
      background-color: red;
      font-size: 50px;
    }
    .left {
      float: left;
      width: 50%;
      height: 100%;
      background-color: green;
    }
    .right {
      float: right;
      width: 50%;
      height: 100%;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <header>top</header>
  <section>
    <div class="left">left</div>
    <div class="right">right</div>
  </section>
</body>
</html>

效果圖

2.實現一個函式，使它滿足

console.log(sum(3,2)) 輸出5；

console.log(sum(3)(2)) 輸出5；

  <script type="text/javascript">
    function sum() {
      if (arguments.length > 1) {
        return arguments[0] + arguments[1];
      } else {
        var a = arguments[0];
        return function(x) {
          return a+x;
        }
      }
    }
    console.log(sum(3,2));    //5
    console.log(sum(3)(2));   //5
  </script>

3.寫一個原型鏈繼承的函式

<body>
  <div id="one"></div>
  <script type="text/javascript">
    function Elem(id) {
      this.elem = document.getElementById(id);
      return this;
    } 
    Elem.prototype.html = function(val) {
      var elem = this.elem;
      if (val) {
        elem.innerHTML = val;
        return this;
      } else {
        return elem.innerHTML;
      }
    }
    Elem.prototype.on = function(type,fn) {
      var elem = this.elem;
      elem.addEventListener(type,fn);
      return this;
    }
    var one = new Elem("one");
    one.html("<p>this is apple</p>").on("click",function(){console.log(this.innerHTML)});
    //<p>this is apple</p>
  </script>
</body>

2018年9月7日

蓋婭娛樂

1.input新增了哪些型別，怎麼使用。

<body>
  <div><input type="email">郵箱</div>
  <div><input type="url">網址</div>
  <div><input type="tel">電話</div>
  <div><input type="number">數字型別，只能輸入數學字元</div>
  <div><input type="Date">選取年月日</div>
  <div><input type="Month">選取年月</div>
  <div><input type="Week">選取年和周</div>
  <div><input type="Time">選取時間，即小時和分鐘</div>
  <div><input type="Datetime">選取年月日和時間（UTC時間，比本地時間多了一個東八區）</div>
  <div><input type="Datetime-local">選取年月日和時間（本地時間）</div>
</body>

2.http和https。

HTTPS和HTTP的區別主要如下：

　　1、https協議需要到ca申請證書，一般免費證書較少，因而需要一定費用。

　　2、http是超文字傳輸協議，資訊是明文傳輸，https則是具有安全性的ssl加密傳輸協議。

　　3、http和https使用的是完全不同的連線方式，用的埠也不一樣，前者是80，後者是443。

　　4、http的連線很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸、身份認證的網路協議，比http協議安全。

3.cookie, sessionStorage和localStorage區別。

4.DOM怎麼新增、刪除、插入、替換節點。

新增節點 document.createElement()

<body>
  <div id="div1"></div>
  <p id="p2">this is p2</p>
  <script type="text/javascript">
    var div1 = document.getElementById("div1");
    var p = document.createElement("P"); //新增一個p節點
    p.innerHTML = "this is p1";
    div1.appendChild(p);        //將p標籤插入到id為div1的div標籤中

    var p2 = document.getElementById("p2");
    div1.appendChild(p2);    //將存在的p2元素移動到div標籤裡面，成為最後一個子元素
  </script>
</body>

刪除節點父元素.removeChild(子元素)

<body>
  <div id="box">
    <div id="div1">
      <span>1</span>
      <span>2</span>
      <div>3</div>
      <div>4</div>
    </div>
  </div>
  <script type="text/javascript">
    var div1 = document.getElementById("div1");
    //獲取父元素
    var parent = div1.parentElement;  //id為box的那個Div元素
    //獲取子元素
    var child = div1.childNodes;   //一個集合，空白處也包括
    //移除元素
    div1.removeChild(child[1]);   //由於包括空白處，所以此處刪除的是<span>1</span>
  </script>
</body>

插入節點父元素.insertBefore(要插入的元素，插入到哪個元素之前) 父元素.appendChild(要插入的子元素)

<body>
  <div id="one">
    <div id="div1">1</div>
    <div>2</div>
    <div>3</div>
  </div>
  <script type="text/javascript">
    var one = document.getElementById("one");
    var div1 = document.getElementById("div1");
    var p = document.createElement("p");
    var text = document.createTextNode("this is p1");
    p.appendChild(text);
    one.insertBefore(p,div1);   //將p元素插入到div1元素之前
  </script>

替換節點

<body>
  <div id="div1">
    <p>1</p>
    <p>2</p>
    <p>3</p>
  </div>
  <script type="text/javascript">
    var div1 = document.getElementById("div1");
    var p = document.createElement("p");
    p.innerHTML = "this is p";
    div1.replaceChild(p,div1.childNodes[1]);  //p去替換<p>1</p>
  </script>
</body>

5.css3實現一個從底部接近的效果。

  <style type="text/css">
    div {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
      bottom: 200px;
      animation: one 2s linear;
    }
    @keyframes one {
      0% {
        bottom: 0px;
      }
      25% {
        bottom: 50px;
      } 
      50% {
        bottom: 100px;
      }
      75% {
        bottom: 150px;
      }
      100% {
        bottom: 200px;
      }
    }
  </style>
</head>
<body>
  <div>1</div>
</body>

6.實現一個數組去重的函式。

<body>
  <script type="text/javascript">
    function only(arr) {
      var a = [];
      for(var i=0; i<arr.length; i++) {
        if (a.indexOf(arr[i]) == -1) {
          a.push(arr[i]);
        }
      }
      return a;
    }
    var a = [1,1,2,3,2];
    console.log(only(a));
  </script>
</body>

7.實現一個定時器，有暫停，重置，等功能。

  <style type="text/css">
    .box {
      width: 300px;
      height: 200px;
      text-align: center;
      margin: 200px auto;
    }
    #one {
      background-color: rgba(7,17,27,0.2);
      width: 280px;
      height: 50px;
      line-height: 50px;
      font-size: 20px;
      text-align: center;
      margin-left: 10px;
      margin-bottom: 20px;
      color: green;
    }
  </style>
</head>
<body>
  <div class="box">
    <div id="one">顯示時間</div>
    <div>
      <button id="start" onclick="start()">開始</button>
      <button id="stop" onclick="stop()">暫停</button>
      <button id="resert" onclick="resert()">重置</button>
    </div>
  </div>
  <script type="text/javascript">
    var timer = null,h=m=s=ms=0,str=null;
    var show = document.getElementById("one");
    function time(){
      ms += 50;
      if (ms >= 1000) {
        ms = 0;
        s += 1;
      }
      if (s >= 60) {
        s = 0;
        m += 1;
      }
      if (m >= 60) {
        m = 0;
        h += 1;
      }
      str = one(h)+"小時"+one(m)+"分鐘"+one(s)+"秒"+ms+"毫秒";
      show.innerText = str;
    }
    function start(){
      timer = setInterval(time,50);
    }
    function stop(){
      clearInterval(timer);
    }
    function resert(){
      clearInterval(timer);
      h=m=s=ms=0;
      var str = "00小時00分鐘00秒0000毫秒";
      show.innerText = str;
    }
    function one(n){
      if (n<10) {
        return "0"+n;
      } else {
        return ""+n;
      }
    }
  </script>
</body>

8.vue的雙向資料繫結。

9.attr()和prop()。

在高版本的jquery引入prop方法後，什麼時候該用prop？什麼時候用attr？它們兩個之間有什麼區別？這些問題就出現了。

關於它們兩個的區別，網上的答案很多。這裡談談我的心得，我的心得很簡單：

對於HTML元素本身就帶有的固有屬性，在處理時，使用prop方法。
對於HTML元素我們自己自定義的DOM屬性，在處理時，使用attr方法。

上面的描述也許有點模糊，舉幾個例子就知道了。

<a href="http://www.baidu.com" target="_self" class="btn">百度</a>

這個例子裡<a>元素的DOM屬性有“href、target和class"，這些屬性就是<a>元素本身就帶有的屬性，也是W3C標準裡就包含有這幾個屬性，或者說在IDE裡能夠智慧提示出的屬性，這些就叫做固有屬性。處理這些屬性時，建議使用prop方法。

<a href="#" id="link1" action="delete">刪除</a>

這個例子裡<a>元素的DOM屬性有“href、id和action”，很明顯，前兩個是固有屬性，而後面一個“action”屬性是我們自己自定義上去的，<a>元素本身是沒有這個屬性的。這種就是自定義的DOM屬性。處理這些屬性時，建議使用attr方法。使用prop方法取值和設定屬性值時，都會返回undefined值。

再舉一個例子：

<input id="chk1" type="checkbox" />是否可見
<input id="chk2" type="checkbox" checked="checked" />是否可見

像checkbox，radio和select這樣的元素，選中屬性對應“checked”和“selected”，這些也屬於固有屬性，因此需要使用prop方法去操作才能獲得正確的結果。

$("#chk1").prop("checked") == false
$("#chk2").prop("checked") == true

如果上面使用attr方法，則會出現：

$("#chk1").attr("checked") == undefined
$("#chk2").attr("checked") == "checked"

全文完。

10.實現一個方法，對字串去除空格，最後輸出沒有空格的字串。

使用js去除字串內所帶有空格，有以下三種方法：

( 1 ) replace正則匹配方法

　　去除字串內所有的空格：str = str.replace(/\s*/g,"");

　　去除字串內兩頭的空格：str = str.replace(/^\s*|\s*$/g,"");

　　去除字串內左側的空格：str = str.replace(/^\s*/,"");

　　去除字串內右側的空格：str = str.replace(/(\s*$)/g,"");

　　示例：

var str = " 6 6 ";
var str_1 = str.replace(/\s*/g,"");
console.log(str_1); //66

var str = " 6 6 ";
var str_1 = str.replace(/^\s*|\s*$/g,"");
console.log(str_1); //6 6//輸出左右側均無空格

var str = " 6 6 ";
var str_1 = str.replace(/^\s*/,"");
console.log(str_1); //6 6 //輸出右側有空格左側無空格

var str = " 6 6 ";
var str_1 = str.replace(/(\s*$)/g,"");
console.log(str_1); // 6 6//輸出左側有空格右側無空格

( 2 ) str.trim()方法

　　trim()方法是用來刪除字串兩端的空白字元並返回，trim方法並不影響原來的字串本身，它返回的是一個新的字串。

　　缺陷：只能去除字串兩端的空格，不能去除中間的空格

　　示例：

var str = " 6 6 ";
var str_1 = str.trim();
console.log(str_1); //6 6//輸出左右側均無空格

　　單獨去除左側空格則使用 str.trimLeft(); //var str_1 = str.trimLeft();

　　單獨去除右側空格則使用 str.trimRight();//var str_1 = str.trimRight();

( 3 ) JQ方法：$.trim(str)方法

　　$.trim() 函式用於去除字串兩端的空白字元。

　　注意：$.trim()函式會移除字串開始和末尾處的所有換行符，空格(包括連續的空格)和製表符。如果這些空白字元在字串中間時，它們將被保留，不會被移除。

　　示例：

var str = " 6 6 ";
var str_1 = $.trim(str);
console.log(str_1); //6 6//輸出左右側均無空格

11.position的fixed,absolute,relative的區別。

12.簡述一下閉包，以及他的作用。

13.前端效能優化。

減少HTTP請求；
減少對DOM的操作；
使用JSON格式來進行資料交換；
高效合理地使用HTML標籤和CSS樣式；
使用CDN加速；
精簡CSS和JS檔案；
壓縮圖片和使用圖片Sprite技術；

14.Bootstrap如何實現響應式佈局的，還有別的移動端佈局的方案嗎？

15.清楚浮動的解決方案。

給父容器觸發BFC，overflow:hidden;

	<style type="text/css">
		.box {
			width: 300px;
			margin: 20px auto;
			border: 1px solid red;
			overflow: hidden;
		}
		.left, .right{
			width: 100px;
			height: 200px;
		}
		.left {
			background-color: red;
			float: left;
		}
		.right {
			background-color: green;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">1</div>
		<div class="right">2</div>
	</div>
</body>

2.利用clear:both加偽元素::after清除浮動：

	<style type="text/css">
		.box {
			width: 300px;
			margin: 20px auto;
			border: 1px solid red;
		}
		.left, .right{
			width: 100px;
			height: 200px;
		}
		.left {
			background-color: red;
			float: left;
		}
		.right {
			background-color: green;
			float: left;
		}
		.box::after {
			content: "";
			display: block;
			clear: both;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="left">1</div>
		<div class="right">2</div>
	</div>
</body>

3.給父元素設定高度；

4.給父元素也新增浮動；

16.設計模式。

校招筆試題1

北京36氪筆試

蓋婭娛樂

校招筆試題1

資料庫校招筆試題(1)

1~n的全排列--閱文集團2018校招筆試題

校招筆試題編程技巧總結

2018 CVTE 前端校招筆試題整理

位元組跳動2019屆校招筆試題

位元組跳動2019屆校招筆試題二

思特奇2019校招筆試題

騰訊校招筆試題之小Q的歌單

美團點評校招筆試題

阿里java校招筆試題——程式碼塊中語句的執行順序

貝殼19年校招筆試題

觸寶科技2018校招筆試題

360校招筆試題（C++小明買菜）

小米運維部14年校招筆試題A的個人答案

2018京東校招筆試題-資料分析崗

2016年騰訊校招筆試題（研發崗）

校招筆試題-玩轉南美館

【網易】2018校招筆試題

巨人網路2019校招筆試題

校招筆試題1

北京36氪筆試

蓋婭娛樂

相關推薦