web前端常見筆試題總結

1、常見javascript筆試題

1.  var a = 1;

    delete a;

    console.log( typeof a); //number

   顯示生命的全局變量不能被刪除 若是是

   a = 1;   delete a;

   console.log(typeof a) //undefined;

  隱式聲明的全局變量能夠刪除

2.用一行代碼實現字符串翻轉 如： str="abcdefg",翻轉後str="gfedcba";

  var a = str.split('').reverse().join('');//gfedcba

3.  var a = 1 ;

  var b= 2;

  var abc = function(){

    var a=b=3;

   }

  abc();

 console.log(a,b);  //1 3

這題一看以爲很簡單，可是個陷阱 var a=b=3;等價於var a=(b=3);b是全局變量

 

4.編寫一個方法求一個字符串的字節長度（英文佔一個字節，中文佔兩個字節）。

function GetBytes(str){

    var len = str.length;

 var bytes = len;

 for(var i=0;i<len;i++){

    if(str.charCodeAt(i) > 255) bytes++;

 }

 return bytes;

}

5.計算當年還剩多少時間，動態顯示「xx年還剩xx天xx時xx分xx秒」

function getLastTime(){

   var date = new Date();

   var d = date.getTime();

   var year = date.getFullYear();

   var endDate = new Date(year,12,31,23,59,59);

   var time = Math.floor((endDate.getTime() - date.getTime())/1000);

   var day = Math.floor(time/(24*60*60));

   var hour = Math.floor(time%(24*60*60)/(60*60));

   var minute = Math.floor(time%(24*60*60)%(60*60)/60);

   var second = Math.floor(time%(24*60*60)%(60*60)%60);

   var str = year +"年還剩"+day+"天"+hour+"時"+minute+"分"+second+"秒";

   document.getElementById("btn").value = str;

}

setInterval(getLastTime,1000);

//這題在幾回筆試中已出過3次

6.   

  setTimeout(function(){console.log("c")},3000);

   setTimeout(function(){ while(1){}},2000);

   setTimeout(function(){console.log("b")},1000);

   console.log("a");

  //輸出 a b

2、css常見筆試題

1.盒子模型

注意IE6-8的盒子模型與其餘瀏覽器的區別，這裏就不細說了。

 

2.IE6的雙倍邊距問題

浮動元素在ie6下產生雙倍邊距，定義浮動元素display：inline；

3.什麼是css hack，常見的有哪些？

css hack 指各版本及各品牌瀏覽器之間對 CSS 解釋後出現網頁內容的兼容bug偏差(好比咱們常說錯位)的處理。

IE6   _height;

IE7  *+height

IE6,IE7  *height

IE7,FF   height !important;

4.爲何不能定義高度爲 1px 的容器？

百度：IE6默認高度形成，解決方法

例如：overflow:hidden | zoom:0.08 | line-height:1px

5.兩列布局，左邊固定200px寬度，右邊自適應

 <div>

     <div class="adide"></div>

     <div class="content"></div>

  </div>

.adide { width:200px; background:#000000; position:absolute; height:500px;}

.content{ margin-left:200px; background:#BB9798; height:500px;}

6.超連接的前後順序

a:link

a:visited

a:hover

a:active

 

三。綜合題（口水題）

這類題目純屬口水提，不要留空白

1.請列出你說知道的ie6bug？

超連接要有href屬性hover才生效、雙倍邊距、背景圖片閃爍、定義100%高度...

 

2.你對HTML5與CSS3的瞭解？有哪些屬性

css3:多背景、box-shadow、text-shdaow、transform、transition、多列、以及新增的選擇器

html5: audio、video、html5離線存儲功能、web存儲 localstorage、sessionstorage

、web sql、 canvas、 強大的表單功能、geolocation地理定位。

 

3.網站性能優化方法？

請參考Yahoo團隊： 網站性能優化的35條黃金守則

 

4.w3c標準是什麼？

網頁主要由三部分組成：結構\表現\和行爲.對應的標準也分三方面：結構化標準語言主要包括 XHTML和XML；表現標準語言主要包括CSS；行爲標準主要包括 對象模型 （如W3C DOM）、ECMAScript等。