1、高級(jí)前端測(cè)試題HTMLCSS測(cè)試1. 你做的頁(yè)面在哪些瀏覽器測(cè)試過(guò)？特有的css屬性前綴分別是什么?2. 網(wǎng)頁(yè)制作會(huì)用到的圖片格式有哪些？3. 請(qǐng)用CSS寫一個(gè)簡(jiǎn)單的幻燈片效果頁(yè)面，圖片尺寸600*320(px)。4. CSS中可以讓文字在垂直和水平方向上重疊的兩個(gè)屬性是什么?5. 簡(jiǎn)述一下漸進(jìn)增強(qiáng)和優(yōu)雅降級(jí)之間的不同。Javascript測(cè)試盡量不使用第三方插件/庫(kù)1. 寫出以下控制臺(tái)輸出結(jié)果。a. console.log( 1 + 2 + '3' ); 輸出：_b. console.log( '3' + 2 + 1 ); 輸出：_c. console.log

2、( + '3' + 2 + 1 ); 輸出：_d. console.log( 1 + +'2' + '3' ); 輸出：_e. console.log( 'A' - 'B' + 'C' ); 輸出：_f. console.log( 0 && 2 | 1 ); 輸出：_g. var a=0.1, b = a+a, c = a-+b; console.log(a,b,c); 輸出：_2. 寫出以下代碼在控制臺(tái)的輸出結(jié)果。(function() var a = b = 9;)();cons

3、ole.log(a); 輸出：_console.log(b); 輸出：_3. 編寫函數(shù)sum，使其按如下調(diào)用皆能正常運(yùn)行。console.log(sum(2,3); / 輸出5console.log(sum(2)(3); / 輸出54. 實(shí)現(xiàn)數(shù)組的倒排以及降序排列。var numberArray = 3,6,2,4,1,5; 倒排結(jié)果：5,1,4,2,6,3降序結(jié)果：6,5,4,3,2,15. 編寫提取Url參數(shù)的函數(shù)，按key-value形式將結(jié)果存儲(chǔ)到j(luò)son結(jié)構(gòu)中返回。url示例：6. 下面代碼返回什么？解釋一下console.log(function f(n)return (n >

4、; 1) ? n * f(n-1) : n)(10);7. 已知有字符串foo="get-element-by-id",寫一個(gè)function將其轉(zhuǎn)化成駝峰表示法"getElementById"。8. 如下代碼點(diǎn)擊"Button3"會(huì)在控制臺(tái)輸出什么？for (var i = 0; i < 5; i+) var btn = document.createElement('button'); btn.appendChild(document.createTextNode('Button ' + i)

5、; btn.addEventListener('click', function() console.log(i); ); document.body.appendChild(btn);追問(wèn)：如果有問(wèn)題，如何修改代碼以實(shí)現(xiàn)預(yù)期效果。附加測(cè)試1. 一天時(shí)針和分針重合多少次？ _2. 一根不均勻的香，需要2小時(shí)燃盡。最少需要幾根香才能測(cè)量出2小時(shí)15分鐘？ _3. 8個(gè)一樣大小的球，其中7個(gè)質(zhì)量一樣，1個(gè)質(zhì)量稍重，有一桿天枰，最少稱重幾次可以找出那個(gè)不一樣重量的小球？ _4. 有一輛火車以每小時(shí)15公里的速度離開(kāi)北京直奔廣州，同時(shí)另一輛火車每小時(shí)20公里的速度從廣州開(kāi)往北京。如果有

6、一只鳥(niǎo)，以30公里每小時(shí)的速度和兩輛火車同時(shí)啟動(dòng)，從北京出發(fā)，碰到另一輛車后就向相反的方向返回去飛，就這樣依次在兩輛火車之間來(lái)回地飛，直到兩輛火車相遇。請(qǐng)問(wèn)，這只鳥(niǎo)共飛行了多長(zhǎng)的距離？ _5. 門外三個(gè)開(kāi)關(guān)分別對(duì)應(yīng)室內(nèi)三盞燈，線路良好，在門外控制開(kāi)關(guān)時(shí)候不能看到室內(nèi)燈的情況，現(xiàn)在只允許進(jìn)門一次，能否確定開(kāi)關(guān)和燈的對(duì)應(yīng)關(guān)系？前端測(cè)試題答案（非標(biāo)準(zhǔn)/僅供參考）HTML/CSS部分1. 目前主流瀏覽器：IE(Internet Explorer)內(nèi)核：Trident,-ms-FF(Firefox)內(nèi)核：Gecko,-moz-ChromeSafari內(nèi)核：WebKit,-webkit-Opera內(nèi)核：P

7、resto,-o-2. 主要圖片格式：BMP、GIF、JPEG(.jpg/.jpeg)、PNG(png-8/png-24)、SVG、TIFF、WebP（新）.3. 主要樣式代碼：.animation width: 600px; height: 320px; overflow: hidden; background-size: cover; background-position: center; -webkit-animation-name: "loops" -webkit-animation-duration:20s; -webkit-animation-iteratio

8、n-count: infinite;-webkit-keyframes "loops" 0% background: url('1.jpg') no-repeat; 25% background: url('2.jpg') no-repeat; 50% background: url('3.jpg') no-repeat; 75% background: url('4.jpg') no-repeat; 100% background: url('5.jpg') no-repeat;4. 垂直：l

9、ine-height 水平：letter-spacing5. 漸進(jìn)增強(qiáng)（progressive enhancement）：針對(duì)低版本瀏覽器進(jìn)行構(gòu)建頁(yè)面，保證最基本的功能，然后再針對(duì)高級(jí)瀏覽器進(jìn)行效果、交互等改進(jìn)和追加功能達(dá)到更好的用戶體驗(yàn)。優(yōu)雅降級(jí)（graceful degradation）：一開(kāi)始就構(gòu)建完整的功能，然后再針對(duì)低版本瀏覽器進(jìn)行兼容。區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開(kāi)始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非?；A(chǔ)的，能夠起作用的版本開(kāi)始，并不斷擴(kuò)充，以適應(yīng)未來(lái)環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶。Javascrip

10、t部分1. 參考答案：a:33(string)b:321(string)c:6(number)d:33(string)e:NaNC(string)f:1(number)2. 參考答案a: undefined b:9（全局變量）3. 參考代碼function sum() if(arguments.length = 2) return arguments0 + arguments1; else var first = arguments0; return function(second) return first + second; 4. 參考代碼倒排方法：numberArray.reverse(

11、)排序方法：numberArray.sort(function(a,b) return a<b)5. 參考代碼function getUrlPara(url) var _tmp = url.split('?'), para = _tmp1 ? _tmp1.split('&') : , len = para.length, result = ; for(var i=0;i<len;i+) var _res = parai.split('='); result_res0 = _res1; return result;6. 10!(

12、10的階乘) = 3628800。立即執(zhí)行函數(shù)的遞歸調(diào)用。7. 參考代碼function lowerCamelCase(funcName) var words = funcName.split('-'), len = words.length; for(var i=1; i<len; i+) wordsi = wordsi.charAt(0).toUpperCase() + wordsi.slice(1);/substring, substr皆可 return words.join("");8. 5。本題考點(diǎn)為閉包與作用域。點(diǎn)擊事件觸發(fā)時(shí)，程序已執(zhí)行完

13、成。點(diǎn)擊事件要輸出變量i，就會(huì)先查找變量i，本身并未定義變量i，而閉包能夠調(diào)用外部作用域中的變量，此時(shí)外部作用域中的i通過(guò)for循環(huán)的自加，值已經(jīng)變?yōu)?，所以每個(gè)按鈕點(diǎn)擊事件，都會(huì)調(diào)用外部作用域中的變量i，在控制臺(tái)輸出5。想要實(shí)現(xiàn)預(yù)期的結(jié)果，即：點(diǎn)擊哪個(gè)按鈕，輸出按鈕上顯示的那個(gè)i值，可以構(gòu)建一個(gè)閉包，以保存自身使用的變量i。參考代碼：for (var i = 0; i < 5; i+) (function(i) var btn = document.createElement('button'); btn.appendChild(document.createTextNode('Button ' + i); btn.addEventListener('click', function() console.log(i); ); document.body.appendChild(btn); )(i);附加題部分1. 22次。一天24小時(shí)，時(shí)針會(huì)轉(zhuǎn)表盤兩圈，一圈會(huì)與分針重合11次（最后一次重合時(shí)是12點(diǎn)0點(diǎn)=第一次重合），所以11*2=2