校招筆試題1
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.設計模式。