1. 程式人生 > >2018秋招前端筆試題(58同城)

2018秋招前端筆試題(58同城)

填空題

  1. 號碼段為131到139的11位手機號碼正則校驗:/^13[1-9][0-9]{8}$/
  2. 移動端,如何在html中通過連結調起撥打電話:<a href="tel:10086">10086</a>'
  3. 一下程式碼的輸出結果:
{
var t='teacher';
let s='student'
}
console.log(t);
console.log(s);
  1. HTTP協議的狀態碼200,400,500分別代表什麼?請求成功、(錯誤請求) 伺服器不理解請求的語法,(伺服器內部錯誤) 伺服器遇到錯誤,無法完成請求
  2. JavaScript算術運算:‘10’+ 1結果為‘101’ ‘10’-1結果為‘9’
  3. var ting = 1, shi=3, wei=2;用ES6字串模板的方式輸出:1室3廳2衛。${ting}室${shi}廳${wei}衛
  4. 用ES6解構的方式,將下面程式碼中的obj.name賦值給n,obj.age賦值給a:let {name: n, age: a} = obj; let obj = {name:’韓梅梅’, age:’20’};let n, a;
  5. HTTP協議預設的埠號‘80__HTTPS協議的埠號443
  6. 名詞解釋:MVCmodel-view-controller 、MVPmodel-view-presenter 、MVVMmodel-view-viewmodel
  7. Flex佈局實現容器box內部元素item垂直居中對齊。. box {display: flex; align-items: center }

簡答題

  1. CSS3的box-sizing的取值及各值的說明。
    content-box CSS2.1 規定的寬度和高度的行為。在寬度和高度之外繪製元素的內邊距和邊框。
    border-box通過從已設定的寬度和高度分別減去邊框和內邊距才能得到內容的寬度和高度。
    inherit規定應從父元素繼承 box-sizing 屬性的值。
  2. 請寫出下列程式碼的執行結果:
function switchCase(value) {
            switch(value) {
                case '0':
                    console.log('case 0'
); case '1': console.log('case 1'); break; case undefined: console.log('undefined'); break; default: console.log('default'); } } // 寫出下列輸出結果 switchCase(0); switchCase('0'); switchCase();

switchCase(0);default
switchCase(‘0’);“case 0”,”case 1”
switchCase();undefined

  • 列舉出通過CSS樣式隱藏元素的方法,並說明其區別
    (1):Opacity設定為0
    (2)visibility設定為hidden
    (3)display設為 none
    (4)position 設為 absolute 然後將位置設到不可見區域。
    (5)Clip-path
方法 新增的任何動畫效果互動效果 是否對網頁佈局起作用 是否佔據之前的位置 對子元素和元素內容 備註
Opacity 起作用 背景和元素內容會跟著變化
visibility 不會響應任何使用者互動 有影響,想要顯示的子元素新增visibility:visible
display 不起作用 它的子元素也會一同從盒子模型中消失
Clip-path 滑鼠懸停或者點選在剪裁區域之外也不可能生效 在IE中是完全不支援的
Position 起作用 主要是通過控制方向,達到一定的值,離開當前可視介面

- 請寫出下面程式碼的執行結果

var s = {   
  s: ‘student’,     
  getS: function(){     
  console.log(this.s); } }; 
  var t = {     s: ‘teaher’ };  
   var getS = s.getS; 
   var getS1 = getS.bind(s);   
   // 寫出以下輸出結果 s.getS(); s.getS.apply(t);     getS(); getS1.call(t);
  • 列出移動端開發中適配各種螢幕尺寸的解決方案(至少3種)
    (1)響應式佈局簡而言之,就是頁面元素的位置隨著螢幕尺寸的變化而變化,通常會用百分比來定位,而在設計上需要預留一些可被“壓縮”的空間。
    (2)Cover佈局就跟background-size的cover屬性一樣,保持頁面的寬高比,取寬或高之中的較小者佔滿螢幕,超出的內容會被隱藏。此佈局適用於主要內容集中在中部,邊沿無重要內容的設計
    (3)Contain佈局同樣,也跟background-size的contain屬性那樣,保持頁面的寬高比,取寬或高之中的較大者佔滿螢幕,不足的部分會用背景填充。個人比較推薦用這種方式,但在設計上需要背景為單色,或者是可平鋪的背景。
    (4)樣式縮放最省事的適配方法,直接用px為單位按視覺進行開發,然後通過計算螢幕與網頁的寬高比,用transform:scale來對網頁進行全域性縮放。不過此方法會有一個小問題,就是如果網頁內有動畫的話,縮放後會稍微降低頁面效能,在低配的安卓機器上表現的比較明顯,iOS上沒發現有效能問題。
    (5)Rem縮放
    Rem是個好東西呀,誰用誰知道,這裡就不多做解釋了。原理跟上面的樣式縮放相通,只不過是通過Rem為單位來進行視覺開發,然後通過計算後改變html的front-size來對頁面進行縮放。關於以Rem為單位進行開發,目前比較流行Font-size=62.5%,而後1rem=10px的這種方法,有試過直接換成px也是可以的,就看個人的計算習慣吧。
  • 用js實現一個隨機打亂陣列順序的函式,要求可以設定陣列種任意1個元素的位置不變,其他位置的元素位置隨機變化。s
  • 用js實現一個比較APP版本號的大小的函式,版本號各市由數字和.組成。例如:1.1.0、1.10、1.2.3等。