阿里前端線上筆試題以及答案總結

1、你做過的最滿意的前端作品？

2、你瞭解哪些新技術？

3、你是怎樣接觸前端的？
4、你對你的學校和專業怎麼看？

5.下圖綠色區域的寬度爲100%，其中有三個矩形，第一個矩形的寬度是200px，第二個和第三個矩形的寬度相等。請使用CSS3中的功能實現它們的佈局。

已知HTML結構是：
<div class="box">
<div class="item">column 1</div>
<div class="item">column 2</div>
<div class="item">column 3</div>
</div>

5.解答：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.box {
		background-color: green;
		display: box;
		display: -moz-box;
		display: -webkit-box;
		display: -0-box;
		width: 100%;
	}
	.box .boxOne {
	background-color: white;
	-moz-box-flex:0;
	-webkit-box-flex:0;
	-0-box-flex:0;
	width: 200px;
	margin: 10px;
	}
	.box .boxTwo {
	background-color: white;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	-0-box-flex:1;
	margin: 10px 0;
	}
	.box .boxThree {
	background-color: white;
	-moz-box-flex:1;
	-webkit-box-flex:1;
	-0-box-flex:1;
	margin: 10px;
	}
	</style>
</head>
<body>
	<div class="box">
		<div class="boxOne">column1</div>
		<div class="boxTwo">column2</div>
		<div class="boxThree">column3</div>
	</div>
</body>
</html>

6、在tmall.com的某個頁面中存在一個id等於J_iframe_taobao的iframe，該iframe的域名是taobao.com。在不考慮IE瀏覽器的情況下，用最簡潔的代碼實現頁面與該iframe進行雙向通信？
...
<iframe id="J_iframe_taobao" src="http://taobao.com/xxx"></iframe>
...

6.解答：
看別人的不知道對不對：

<iframe id="J_iframe_taobao" src="http://taobao.com/xxx" οnlοad="getdata()"></iframe>
<script>
    function getdata()
       {
           var iframe =document.getelmentById('J_iframe_taobao');
           iframe.onload = function()
          {
              var data =iframe.contenWindow.name;
              alert(data);
          }
          iframe.src="about:blank";
       }
</script>

----------------------------------------------
另一個大神寫的答案：

父頁面監聽
var cb = function(json){
            if(json){
                if(json == 'SUCC') {
                    QT.WM.close();
                } else {
                    json = $.parseJSON(json);
                    wan360.appurl = json.appurl;
                    wan360.appname = json.appname;
                }
            }
        };
        wan360.xdomain.listen({APP: cb});
子頁面發送：
wan360.xdomain.sendMessage(window.parent,'{"appurl":"'+app.appurl+'","appname":"'+app.appname+'"}','APP');
好吧，答案應該是html5的postMessage，下面的代碼可能有誤~

    var onmessage = function(e) {
           var data = e.data,p = document.createElement_x('p');
           p.innerHTML = data;
           document.getElementById('J_iframe_taobao').appendChild(p);
        };
        //監聽postMessage消息事件
        if (typeof window.addEventListener != 'undefined') {
          window.addEventListener('message', onmessage, false);
        } else if (typeof window.attachEvent != 'undefined') {
          window.attachEvent('onmessage', onmessage);
        }

7、請用html5標準完成以下頁面佈局（要求完整書寫整個頁面的html代碼，不需要寫CSS）

7.解答：

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Html5</title>
</head>
<body>
	<header></header>
	<nav></nav>
	<div>
		<aside></aside>
		<section></section>
	</div>
	<footer></footer>
</body>
</html>

加CSS樣式：

<pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>阿里校招前端第7體</title>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		html,body,article{
			height: 100%;
			width: 100%;
		}
		header,nav,aside,hgroup,footer{
			border: 1px solid black;
			display: block;;
			text-align: center;
			margin: 10px;
			line-height: 50px;
		}
		header,footer,nav{
			height: 50px;
			border-radius: 10px;
		}
		article{
			display: box;
			display: -moz-box;
			display: -o-box;
			display: -webkit-box;
		}
		aside{
			box-flex:0;
			-moz-box-flex:0;
			-o-box-flex:0;
			-webkit-box:0;
			width: 200px;
			border-radius: 10px 0 0 10px;
			margin-top: 0px;
			margin-right: 0px;

		}
		hgroup{
			box-flex:1;
			-moz-box-flex:1;
			-o-box-flex:1;
			-webkit-box-flex:1;
			border-radius: 0 10px 10px 0 ;
			margin-top: 0px;
		}
		footer{
			margin-top: 0;
		}
	</style>
</head>
<body>
	<header>頭部</header>
	<nav>導航</nav>
	<article>
		<aside>側邊欄</aside>
		<hgroup>內容區</hgroup>
	</article>	
	</div>
	<footer>腳部</footer>
</body>
</html>

8、請寫一個 getParents 方法讓它可以獲取某一個 DOM 元素的所有父親節點。

8.解答：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Html5</title>
</head>
<body>
	<div>
		<div id='test'></div>
		<div></div>
	</div>
	<script type="text/javascript">
		var getParents = function(id){
			var nodes = id.parentNode;
			while(nodes.tagName){
				document.write(nodes.tagName+"</br>");
				nodes = nodes.parentNode;
			}
			return nodes;
		}
		getParents(test);
	</script>
</body>
</html>

9、請寫出至少5個html5新增的標籤，並說明其語義和應用場景。

9.解答：

①canvas 標籤定義圖形，比如圖表和其他圖像。這個 HTML 元素是爲了客戶端矢量圖形而設計的。它自己沒有行爲，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使腳本能夠把想繪製的東西都繪製到一塊畫布上。
②command 標籤定義命令按鈕，比如單選按鈕、複選框或按鈕。
③datalist 標籤定義可選數據的列表。與 input 元素配合使用，就可以製作出輸入值的下拉列表。
④details 標籤定義元素的細節，用戶可進行查看，或通過點擊進行隱藏。與 legend 一起使用，來製作 detail 的標題。該標題對用戶是可見的，當在其上點擊時可打開或關閉 detail。
⑤hgroup 標籤用於對網頁或區段（section）的標題進行組合。
⑥mark主要用來在視覺上向用戶呈現那些需要突出的文字。mark標籤的一個比較典型的應用就是在搜索結果中向用戶高亮顯示搜索關鍵詞。

10、實現如下圖所示的佈局

要求：sidebar 固定寬度200px，content和header寬度自適應
當window寬度小於600px時，變成三行佈局

默認如下
寬度小於600px時如下

下面是HTML結構：
<div class='header'>
<h1>header</h1>
</div>
<div class="sidebar">
<h1>sidebar</h1>
</div>
<div class="content">
<h1>content</h1>
</div>

請寫出其css代碼：（提示，可以使用media query來檢測瀏覽器窗口寬度）

10.解答：

</pre><p></p><pre name="code" class="html"><!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	@media(max-width: 600px){
		*{
			margin: 0px;
			padding: 0px;
		}
		div{
			height: 50px;
			margin: 5px;
		}
		.header{
			width:auto;
			background-color: red;
		}
		.sidebar{
			width: auto;
			background-color: green;
		}
		.content{
			width: auto;
			background-color: blue;
		}
	}
	@media(min-width: 600px){
		*{
			margin: 0px;
			padding: 0px;
		}
		div{
			height: 50px;
			margin: 5px;
		}
		.header{
			width:auto;
			background-color: red;
		}
		.sidebar{
			width: 200px;
			background-color: green;
			float: left;
			margin-top: 0;
		}
		.content{
			width: 100%;
			background-color: blue;
			margin-left: 210px;
		}
	}
		
	</style>
</head>
<body>
<div class='header'>            
      <h1>header</h1>        
</div>        
<div class="sidebar">            
      <h1>sidebar</h1>        
</div>
<div class="content">
      <h1>content</h1>
</div>
</body>
</html>

11.有一個頁面區塊如圖所示，請用符合語義化的標籤書寫HTML代碼。

11.解答:

<div>
	<h4>店鋪動態評分<span>與同行業相比</span></h4>
	<ul>
		<li>描述相符：<a href="" target="_blank"><em title='4.8'>4.8 </em><span><b>高於</b><em>16.14%</em></span></a></li>
		<li>服務態度：<a href="" target="_blank"><em title='4.8'>4.8 </em><span><b>高於</b><em>13.32%</em></span></a></li>
		<li>發貨速度：<a href="" target="_blank"><em title='4.8'>4.8 </em><span><b>高於</b><em>29.57%</em></span></a></li>
	</ul>
</div>

12.在CSS樣式中常使用px、em兩種長度單位，各有什麼優劣，在表現上有什麼區別？

12解答：

px表示像素，em是相對單位。
px作爲尺寸時，部分瀏覽器中放大頁面時，文字不會變大。
em在縮放查看網頁時，能準確縮放文字。
px像素(Pixel)，相對長度單位，像素px是相對於顯示器屏幕分辨率而言的(引自CSS2.0手冊)；em是相對長度單位，相對於當前對象內文本的字體尺寸，如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸(引自CSS2.0手冊)。

13.請列舉所知道的css選擇器，並說明怎麼判斷優先級？

13.解答

1. 標籤選擇器  如 div{}
2. 類選擇器，如 .className{}
3. id選擇器，如 #idName{}
4. 後代選擇器，如 .polaris span img{}，後代選擇器實際上是使用多個選擇器加上中間的空格來找到具體的要控制的標籤。
5. 羣組選擇器，如 div,span,img{}，羣組選擇器實際上是對CSS的一種簡化寫法，只不過把有相同定義的不同選擇器放在一起，省了很多代碼。
6. 僞類選擇器，如 div:first-child{}，僞類選擇器就好像是給元素添加了一個幻象類，並根據這個類添加相應的樣式，與類選擇器不同，僞類選擇器的類名都是固定的，且以“ ： ”開頭。
7. 僞元素選擇器，如 h2:first-letter{}，僞元素選擇器就好像是在元素中添加了一個僞元素，比如這裏可以理解成<h2><h2:first-letter>F</h2:first-letter>irst</h2>，但實際上卻是<h2>First</h2>。

14.有兩個盒子 A、B，B 在 A 盒子中，它們的 CSS 是這麼定義的：

A {
position:relative;
width:500px;
height: 500px;
background-color:green;
}
B {
position:absolute;
max-width:300px;
max-height:300px;
background-color:blue;
}
如何實現 B 在 A 中水平方向和垂直方向居中？

14.解答

說實話這題我沒太看懂，我就說下垂直居中和水平居中的方法吧。
水平居中大家都知道margin:0 auto就行了，垂直居中也有display:table，然後vertical-align: middle;這都是基本方法，但是我目測這道題考察的是css3吧。css3可以用下面的方法實現子元素居中（不同瀏覽器需要寫私有屬性）

display: box; 
box-orient: horizontal; 
box-pack: center; 
box-align: center;

15.

//現有代碼如下:

function test() {
	var a = 1;
	setTimeout(function() {
		alert(a);
		a = 3;
	}, 1000);
	a = 2;
	setTimeout(function() {
		alert(a);
		a = 4;
	}, 3000);
}
 
test();
alert(0);

//請注意,代碼中有三處alert.他們分別會alert出什麼值,時間上的順序是怎樣的?

//請詳述得到這個答案的原因,特別是test函數的局部變量a是對運行結果的影響.

15解答：
我用谷歌瀏覽器測試，彈出順序是：0 2 3
（但是我看到別人答案是alert2 3 0，時間順序爲 3 1 2）

16.當我們使用CSS3新屬性，比如：box-shadow或者transition時，我們怎麼檢測瀏覽器是否支持這些屬性？
請設計一個JavaScript函數，該函數接受一個CSS屬性名作爲參數，並返回一個boolean值，表明瀏覽器是否支持這個屬性。

16.解答

var supports = (function() {
   var div = document.createElement('div'),
      vendors = 'Khtml Ms O Moz Webkit'.split(' '),
      len = vendors.length;
 
   return function(prop) {
      if ( prop in div.style ) return true;
 
      prop = prop.replace(/^[a-z]/, function(val) {
         return val.toUpperCase();
      });
 
      while(len--) {
         if ( vendors[len] + prop in div.style ) {
            // browser supports box-shadow. Do what you need.
            // Or use a bang (!) to test if the browser doesn't.
            return true;
         }
      }
      return false;
   };
})();
 
if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

17.如果你現在使用的是 Google Chrome 或 Apple Safari，如何讓 input 元素在默認情況下顯示 “alipay WD Team”，而在光標移入後則顯示空白？

17.解答

css3 placeholder必須輸入文字纔會消失，所以不行，用JS實現

οnblur="this.value = this.value == ' ' ? this.defaultValue : this.value" 
οnfοcus="this.value = this.value == this.defaultValue ? ' ' : this.value"

18.解釋一下
alert(Function instanceof Object);
alert(Object instanceof Function);

這個結果。

18.解答

Object, Function, Array等等這些都被稱作是構造“函數”，他們都是函數。而所有的函數都是構造函數Function的實例。從原型鏈機制的的角度來說，那就是說所有的函數都能通過原型鏈找到創建他們的Function構造函數的構造原型Function.protorype對象，所以：
alert(Object instanceof Function);// return true
與此同時，又因爲Function.prototype是一個對象，所以他的構造函數是Object. 從原型鏈機制的的角度來說，那就是說所有的函數都能通過原型鏈找到創建他們的Object構造函數的構造原型Object.prototype對象，所以：
alert(Function instanceof Object);// return true
延伸
有趣的是根據我們通過原型鏈機制對instanceof進行的分析，我們不難得出一個結論：Function instanceof Function 依然返回true, 原理是一樣的

Function是構造函數，所以它是函數對象
函數對象都是由Function構造函數創建而來的，原型鏈機制解釋爲：函數對象的原型鏈中存在Function.prototype
instanceof查找原型鏈中的每一個節點，如果Function.prototype的構造函數Function的原型鏈中被查到，返回true
因此下面代碼依然返回true
alert(Function instanceof Function);// still true
結論

在JavaScript語言中，一切的一切都是對象，它們全部繼承自Object. 或者說所有對象的原型鏈的根節點都是Object.prototype
理解原型鏈機制在JavaScript中式如何工作的是非常重要的。掌握了它，不管一個對象多麼複雜，你總能夠輕而易舉地將它攻破。

19./現有代碼如下：
var foo = 1;
function main(){
alert(foo);
var foo = 2;
alert(this.foo)
this.foo = 3;
}
//1.請給出以下兩種方式調用函數時，alert的結果，並說明原因。
var m1 = main();
var m2 = new main();
//2.如果想要var m1 = main()產生的m1和前面的m2完全一致,又該如何改造main函數?

19.解答

1、var m1=main()時，alert的結果是undefined和1,原因是首先在alert(foo)的時候，foo在main()函數域內還沒有被定義，因此提示undefined,而在輸出this.foo時，因爲此時的函數執行環境是全局域，相當於window.main()，因此this=window，所以this.foo=window.foo=1
var m2=new main()時,alert的結果是undefined和undefined，第一個undefined的原因與前面一種情況相同，而第二個提示undefined的原因是在這種情況下用new構造了一個main()的實例，因此執行環境發生了改變，不再是全局域，而是m2，因此此時的this=m2，因此this.foo=m2.foo，但是由於在alert(this.foo)時，m2中的this.foo還未被定義,因此提示undefined
2、若要m1=main()與前面的m2產生的效果一致，則main()函數要修改成爲function main(){alert(foo);foo=undefined;alert(this.foo);}即可

20.寫一段腳本，實現：當頁面上任意一個鏈接被點擊的時候，alert出這個鏈接在頁面上的順序號，如第一個鏈接則alert(1), 依次類推；

20.解答

window.onload = function(){
	var links = document.getElementByTag('a');
	var l = links.length;
	for(var i = 0;i<l;i++){
 		links[i].onclick = function(x){
  	 	return function(){alert(x+1);};
   		}(i);
	}
};

21.在CSS樣式中常使用px、em兩種長度單位，各有什麼優劣，在表現上有什麼區別？

21.解答

同12題

22.(new Date).getTime() 和 +new Date() 都可以取到當前時間戳，它們的實現原理是什麼，哪個效率更高？

23.有哪些前端代碼優化/性能優化的方法？

23.解答

①Yslow-23條規則
YslowYahoo發佈的一款基於FireFox的插件,主要是爲了提高網頁性能而設計的，下面是它提倡了23條規則，還是很不錯的，分享一下：

1.減少HTTP請求次數
合併圖片、CSS、JS，改進首次訪問用戶等待時間。
2. 使用CDN
就近緩存==>智能路由==>負載均衡==>WSA全站動態加速
3. 避免空的src和href
當link標籤的href屬性爲空、script標籤的src屬性爲空的時候，瀏覽器渲染的時候會把當前頁面的URL作爲它們的屬性值，從而把頁面的內容加載進來作爲它們的值。測試
4. 爲文件頭指定Expires
使內容具有緩存性。避免了接下來的頁面訪問中不必要的HTTP請求。
5. 使用gzip壓縮內容
壓縮任何一個文本類型的響應，包括XML和JSON，都是值得的。舊文章
6. 把CSS放到頂部
7. 把JS放到底部
防止js加載對之後資源造成阻塞。
8. 避免使用CSS表達式
9. 將CSS和JS放到外部文件中
目的是緩存，但有時候爲了減少請求，也會直接寫到頁面裏，需根據PV和IP的比例權衡。
10. 權衡DNS查找次數
減少主機名可以節省響應時間。但同時，需要注意，減少主機會減少頁面中並行下載的數量。IE瀏覽器在同一時刻只能從同一域名下載兩個文件。當在一個頁面顯示多張圖片時，IE 用戶的圖片下載速度就會受到影響。所以新浪會搞N個二級域名來放圖片。
11. 精簡CSS和JS
12. 避免跳轉
同域：注意避免反斜槓 “/” 的跳轉；跨域：使用Alias或者mod_rewirte建立CNAME（保存域名與域名之間關係的DNS記錄）
13. 刪除重複的JS和CSS
重複調用腳本，除了增加額外的HTTP請求外，多次運算也會浪費時間。在IE和Firefox中不管腳本是否可緩存，它們都存在重複運算 JavaScript的問題。
14. 配置ETags
它用來判斷瀏覽器緩存裏的元素是否和原來服務器上的一致。比last-modified date更具有彈性，例如某個文件在1秒內修改了10次，Etag可以綜合  Inode(文件的索引節點(inode)數)，MTime(修改時間)和 Size來精準的進行判斷，避開UNIX記錄MTime只能精確到秒的問題。 服務器集羣使用，可取後兩個參數。使用ETags減少Web應用帶寬和負載
15. 可緩存的AJAX
“異步”並不意味着“即時”：Ajax並不能保證用戶不會在等待異步的JavaScript和XML響應上花費時間。
16. 使用GET來完成AJAX請求
當使用XMLHttpRequest時，瀏覽器中的POST方法是一個“兩步走”的過程：首先發送文件頭，然後才發送數據。因此使用GET獲取數據時更加有意義。
17. 減少DOM元素數量
是否存在一個是更貼切的標籤可以使用？人生不僅僅是DIV+CSS
18. 避免404
有些站點把404錯誤響應頁面改爲“你是不是要找***”，這雖然改進了用戶體驗但是同樣也會浪費服務器資源（如數 據庫等）。最糟糕的情況是指向外部 JavaScript的鏈接出現問題並返回404代碼。首先，這種加載會破壞並行加載；其次瀏覽器會把試圖在返回的404響應內容中找到可能有用的部分當 作JavaScript代碼來執行。
19. 減少Cookie的大小
20. 使用無cookie的域
比如圖片 CSS 等，Yahoo! 的靜態文件都在主域名以外，客戶端請求靜態文件的時候，減少了 Cookie 的反覆傳輸對主域名的影響。
21. 不要使用濾鏡,png24的在IE6半透明那種東西，別亂使，淡定的切成PNG8+jpg
22. 不要在HTML中縮放圖片
23. 縮小favicon.ico並緩存
②Page Speed在運行時會分析一些Web服務器配置和服務器上下載下來的代碼，還會創建一個結果列表，其中包括如何改進網頁的建議。分析基於一個分爲五類的最佳實踐列表：
　　* 優化緩存——讓你應用的數據和邏輯完全避免使用網絡
　　* 減少迴應時間——減少一連串請求-響應週期的數量
　　* 減小請求大小——減少上傳大小
　　* 減小有效負荷大小——減小響應、下載和緩存頁面的大小
　　* 優化瀏覽器渲染——改善瀏覽器的頁面佈局

　這些實踐考慮了頁面加載時間，以及發出頁面請求到客戶端看到結果之間的時間。頁面加載時間包括創建TCP連接、解析DNS名稱、發送請求、獲取（包括來自於緩存的）資源、執行腳本、渲染。

24.有一個數組，其中保存的都是小寫英文字符串，現在要把它按照除了第一個字母外的字符的字典順序(字典順序就是按首字母從a-z順序排列，如果首字母相同則按第二個字母……)排序，請編寫代碼：

例：
["abd","cba","ba",]
排序後
["ba","cba","abd"]

24.解答

#include <iostream.h>
#include <cstdio.h>
#include <cstring.h>
#include <algorithm.h>
using namespace std;
#define STRINGN 128
#define MAXN 1024
struct data
{
	char name[STRINGN];
};
data array[MAXN];
bool cmp(data x,data y)
{
	return strcmp(x.name + 1, y.name + 1) < 0; } 
int main() { 
#ifdef TEST 	
freopen("input", "r", stdin); 	
freopen("output", "w", stdout); 
#endif 	
int n; 	
for (n = 0; cin >> array[n].name; ++ n);
 
	sort(array,array+n,cmp);
	for (int i = 0; i < n; ++ i)
		cout << array[i].name << endl;
	return 0;
}

25.

1.你瞭解arguments對象麼,它有哪些屬性?

2.arguments是數組麼?如果不是請寫一段代碼將其轉化爲真正的數組,什麼情況下需要這麼做?
3.arguments有什麼特性,可以用這些特性做什麼?

25.解答

function A(){
　　　var  Args = Array.prototype.slice.call(arguments, 0);
　　　B(Args.slice(1));
　　}

26.請爲JavaScript每個Array對象添加一個類似於PHP的shuffle()的方法。

26.解答

var data = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9);    
    if (!Array.prototype.shuffle) {
        Array.prototype.shuffle = function() {
            for(var j, x, i = this.length; i; j = parseInt(Math.random() * i), x = this[--i], this[i] = this[j], this[j] = x);
            return this;
        };
    }     
    alert(data.shuffle());

27.CSS的“僞類”和“僞元素”有什麼區別？請舉例僞元素的幾種應用場景。

28.頁面中有個id爲J_banner的區塊，請使用CSS實現在普通屏幕上使用圖片banner.png爲背景，在retina屏幕上顯示更高分辨率的圖片banner_retina.png作爲背景

28.解答

css3的images-set屬性：

background-image:url(1x.png);
background-image:-webkit-image-set(url(1x.png) 1x,url(2x.png) 2x);

29.下面是一段html代碼，展示效果如圖A所示。請給出一段css，使這段代碼達到圖B的展示效果。

A:B:

<ul> 
<li> 
<a href="#"><img width="100" height="100" src="a.jpg /></a> 
<p>文字一</p> 
</li> 
<li> 
<a href="#"><img width="100" height="100" src="a.jpg" /></a> 
<p>文字二</p> 
</li> 
</ul> 
<ul> 
<li>文字三</li> 
<li>文字四</li> 
<li>文字五</li> 
<li>文字六</li> 
</ul>

要求：

1.不允許修改html結構；
2.css不必考慮瀏覽器默認樣式的因素，佈局正確即可；
3.不要求嚴格對齊，如有需要，元素尺寸可自定義。

30.頁面上有一個節點 <div id=”a” style=”background-color:#000; width:200px; height:200px;”></div>，請實現當鼠標移至該節點時，該節點的透明度從 100 漸變爲 20：

31./請補全下面的函數，僅當p爲數組時返回true.
//可給出多種實現方式,每種實現方式不一定完美,如果不完美,需要說明每種實現的限制
function isArray(p) {
//你的代碼在這裏
}

32.var a = [-3,-1,0,1,3,5,7,9], b = [-4,-2,0,2,3,4,5,6,7,8];
//返回一個合併過的數組[-4,-3,-2,-1,0,0,1,2,3,3,4,5,5,6,7,7,8,9]

33.

<p>1</p>
<p>2</p>
<p>3</p>
請編寫一段css，讓數字1顏色變藍。

33.解答

p:first-child{color:blue}

34.請讓頁面中的一個元素（10px*10px）圍繞座標(200, 300) 做圓周運動

35.用HTML實現下面表格的結構：

36.data-’屬性的作用是什麼？

36.解答

data-爲前端開發者提供自定義的屬性，這些屬性集可以通過對象的dataset屬性獲取，不支持該屬性的瀏覽器可以通過getAttribute方法獲取。ppk提到過使用rel屬性，lightbox庫推廣了rel屬性，HTML5提供了data-做替代，這樣可以更好地使用自定義的屬性。

37.請列舉CSS中用於隱藏元素的兩個屬性？兩者的差異？

37.解答

display:none和visibility: hidden;前者不佔位，後者佔位。

38.在jquery中，選擇器使用的是sizzle，sizzle的基本原理是”從後往前查找”，比如選擇器“ .a > .b > .c”，是先查找”.c”而不是”.a”。請解釋爲什麼大部分情況下“從後往前”比“從前往後”查找速度更快

39.//現有代碼如下:
var a = 1;
var obj = { b : 2 };
var fn = function() {};
fn.c = 3;
function test(x, y, z) {
x = 4;
y.b = 5;
z.c = 6;
return z;
}
test(a, obj, fn);
alert(a + obj.b + fn.c);
//這段代碼能夠正常運行麼?如果不能正常運行,請說明原因.
//如果可以運行,最後一行alert的值是多少,並請說明原因.

39解答：

可以運行，alert彈出12.

40.怎麼將一個字符串按照長度分成幾個字符串：
答案：

<script>
        var n=3;//假設3個字符爲一串分開
        var str = "s1e2t3e5t4w8g6f";
        var new_str = "";
        for (var i = 0; i < str.length; i++) {
            new_str += str.substr(i, 1);
            if ((i+1) % n == 0)
                new_str += ",";
        }
        if (str.length % n == 0)
            new_str=new_str.substr(0, new_str.length - 1);
        alert(new_str);
    </script>

41.數組去重：
答案：

Array.prototype.unique3 = function()
{
var n = [this[0]]; //結果數組
for(var i = 1; i < this.length; i++) //從第二項開始遍歷
{
//如果當前數組的第i項在當前數組中第一次出現的位置不是i，
//那麼表示第i項是重複的，忽略掉。否則存入結果數組
if (this.indexOf(this[i]) == i) n.push(this[i]);
}
return n;
}

42.用CSS實現佈局

讓我們一起來做一個頁面
首先，我們需要一個佈局。
請使用CSS控制3個div，實現如下圖的佈局：

43.用javascript優化佈局
由於我們的用戶羣喜歡放大看頁面，於是我們給上一題的佈局做一次優化。
當鼠標略過某個區塊的時候，該區塊會放大25%，並且其他的區塊仍然固定不動
效果如下：

提示：
也許，我們其他的佈局也會用到這個放大的效果哦。
可以使用任何開源代碼，包括曾經你自己寫的。

關鍵字：
javascript、封裝、複用

42.43.解答

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body{ margin:0; padding:0}  
div{background:#CCCCCC; position:absolute}  
#first{width:100px; height:150px}  
#second{top:160px;width:100px;height:150px}  
#third{ width:200px; height:310px; left:110px} 
	</style>
	
</head>
<body>
<div id="first"></div>     
<div id="second"></div>     
<div id="third"></div>
<script type="text/javascript">
	function zoom(id,x,y){ // 設置縮放函數參數：容器id、橫向縮放倍數、縱向縮放倍數（等比例縮放時也可以設定一個參數）  
var obj=document.getElementById(id); // 獲取元素對象值  
var dW=obj.clientWidth; // 獲取元素寬度 ,obj.clientWidth 相當於obj的內容的寬度+padding,不包含border和margin，同obj.scrollWidth; 
var dH=obj.clientHeight; // 獲取元素高度  
//var oTop=obj.offsetTop; //obj.offsetWidth 相當於obj的內容的寬度 + padding +border,不包含margin 
//var oLeft=obj.offsetLeft;  
obj.οnmοuseοver=function(){ // 鼠標移入  
this.style.width=dW*x+"px"; // 橫向縮放  
this.style.height=dH*y+"px"; // 縱向縮放  
this.style.backgroundColor="#f00"; // 設置調試背景  
this.style.zIndex=1; // 設置z軸優先  
}  
obj.οnmοuseοut=function(){ // 鼠標移出，設回默認值  
this.style.width="";  
this.style.height="";  
this.style.padding="";  
this.style.backgroundColor="";  
this.style.zIndex="";  
}  
}  
zoom("first",1.25,1.25);  
zoom("second",1.25,1.25);  
zoom("third",1.25,1.25); 
</script> 
</body>
</html>

-------2015年3月前端實習生筆試題目-------------

43.(9題)：實現一個isDuplicate方法，如果這個方法傳入的參數包含相同的數字則返回true，否則返回false。

解答：

function isDuplicate(){
    var n = arguments.length;
    for (var i = 0; i < n-1; i++) {
        for(var j = i+1; j < n; j++){
        	if(arguments[i] == arguments[j]){
        		return true;
        		break;
        	}
        }
    }
    return false;
}
isDuplicate(1,2,3,2);

44. (10題)：下面代碼希望在點擊每段內容的時候給它加個灰色背景，可是下面這段代碼好像沒有滿足要求，請幫忙修改代碼：

for(var i = 0; i < document.getElementsByTagName('p').length; i ++) {
var item = document.getElementsByTagName('p')[i];
(function(j) {
document.getElementsByTagName('p')[i].onclick = function() {
item.style.backgroundColor='#eee';
}
}(i))
}

解答：這題一開始沒看出來啥問題，後來改代碼沒反應，之後換了個顏色才發現是原來修改的對的！！只是顏色和屏幕的相近沒看出來。

<body>
          
<p>nijhao </p>   
<p>dddd</p>
<p>nijhao </p>   
<p>dddd</p>  
<script type="text/javascript">
    window.onload = function () {
        var item = document.getElementsByTagName('p');
        for (var i = 0; i < item.length; i++) {        
            (function (i) {
                item[i].onclick = function () {
                    this.style.backgroundColor = 'red';
                };
            }(i));
        }
    }
</script>
</body>

45.(11題)：爲字符串實現一個render方法，實現下面的變量替換功能
var greeting = 'my name is ${name}, age ${age}';
var result = greeting.render({name: 'XiaoMing', age: 11});
console.log(result); //my name is XiaoMing, age 11

46.(12題)：實現函數 range([start, ]stop [,step]) 返回一個數組（step大於1）
> range(1, 11); => [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
> range(0); => []
> range(10); => [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
> range(0, 30, 5); => [0, 5, 10, 15, 20, 25]

47.(13題)：用js實現隨機選取10–100之間的不同的10個數字，存入一個數組，並降序排序.

-------2015年3月前端實習生筆試題目---結束----------

48.在頁面中實現如下效果：

解答：

代碼：

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>2個DIV</title> 
<style type="text/css"> 
#heng,#shu{left:50%;top:50%;position:absolute; background-color:#f00;}  
#shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}  
#heng{width:150px;height:50px;margin-left:-75px;margin-top:-25px;background-color:#f00;}  
</style> 
</head> 
<body> 
     <div id="heng"></div> 
     <div id="shu"></div>
    
</body> 
</html>

49.

50.

51.

52.

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>2個DIV</title> 
<style type="text/css"> 
#heng,#shu{left:50%;top:50%;position:absolute; background-color:#f00;}  
#shu{width:50px;height:150px;margin-left:-25px;margin-top:-75px;}  
#heng{width:150px;height:50px;margin-left:-75px;margin-top:-25px;background-color:#f00;}  
</style> 
</head> 
<body> 
     <div id="heng"></div> 
     <div id="shu"></div>
</body> 
</html>

....未完待續