javascript+HTML+CSS面試題

今天參加面試，考了我三個小時，考暈了，趕緊補習補習javascript的知識！（另：人事部明明說招HTML5+CSS3+jQuery，考1個半小時左右，怎么變成了考傳統DIV+CSS+javascript啦，嗚嗚嗚~~~）

先看看簡單的

1、完成foo()函數的內容，要求能夠彈出對話框提示當前選中的是第幾個單選框。

<html> 
<head> 
<script> 
function foo() 
{ 
// 在此處添加代碼 var rg = document.getElementsByName("radioGroup"); for( var i = 0; i < rg.length; i++ ) { if( rg[i].checked ) {  alert("你選擇了第" + (i+1) + "個單選框"); } } return false; 
} 
</script> 
</head> 
<body> 
<form name="form1" οnsubmit="return foo();"> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="radio" name="radioGroup" /> <input type="submit" /> 
</form> 
</body> 
</html>

2、完成字符串翻轉功能填充注釋部分的函數體，使得foo()函數調用彈出”成功”的對話框。

<html> 
<head> 
<script> 
function foo() 
{ var str = reverse('a,b,c,d,e,f,g'); alert(str); if (str == 'g,f,e,d,c,b,a') alert('成功'); else alert('失敗'); } 
function reverse(str) 
{ 
// 在此處加入代碼，完成字符串翻轉功能 
var spl = str.split(','); 
var newstr=""; 
for(i=spl.length-1;i>=0;i--) { newstr+=spl[i]+','; } 
newstr=newstr.substring(0,newstr.length-1) 
return newstr; 
} 
</script> 
</head> 
<body> 
<input type="button" value="str" οnclick="foo()" /> 
</body> 
</html>

3. 有一組數字，從1到n，從中減少了3個數，順序也被打亂，放在一個n-3的數組里請找出丟失的數字，最好能有程序，最好算法比較快

<script type="text/javascript">
//<!--var oldArr = [0,1, 2, 3, 4, 5, 6, 7, 8, 9]; //初始數組var newArr = [5, 6, 3, 9, 0, 8, 2]; //去掉 1 4 7三個數字并且順序是亂的 var lostArr = []; //要找的數的數組newArr.sort(); //排序var newString = ',' + newArr.join(',') + ',';var length = oldArr.length;for (var j = 0; j < length; j++) {var oldString = ',' + oldArr[j] + ',';if (newString.indexOf(oldString)==-1)lostArr.push(oldArr[j]);}alert(lostArr);
//-->
</script>

只用一次循環

<script>var a = [0,3,4,8,9,2,6];var b = [];var i, len, min, max;a.sort(function (a, b) {return a-b;});for (i=0,len=a.length;i<len;i+=1) {min = a[i];max = a[i+1]if (max !== min + 1) {b.push(min+1);}}alert(b.slice(0,-1));
</script>

4、編寫一個測試頁面，第一道題答對后顯示第二道題，如果答錯給出正確答案后再顯示第二道題，依次類推，當三道題全部答對后給出提示："恭喜，你全部答對了！"

如：第一題：你的姓名？

????? 選項： A 管理員（正確答案）? B 游客? C 無名

????? 第二題：你所在的公司名稱？

????? 選項： A IBM? B Oracle? C BIG（正確答案）

????? ...

5.標簽頁導航效果

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD>   
<title>自適應寬度的標簽導航</title>  
<META http-equiv=Content-Type content="text/html; charset=gb2312">  <STYLE type=text/css>
*{margin:0px;padding:0px;}
.tab{ 
border:1px solid #FF0000;
width:296px;  
margin:0px auto; 
}
.menu{font-size:12px}
.menu ul li{ 
text-align:center; 
display:block; 
float:left; 
height:25px; 
width:98px; 
line-height:25px; 
cursor:pointer; 
background:#ddd;
border-right-width:1px; 
border-bottom-width:1px; 
border-right-style:solid; 
border-bottom-style:solid; 
border-right-color:#FF0000; 
border-bottom-color:#FF0000;
}
.menu ul li.tabhover{ 
border-bottom-style:none; 
font-weight:bold; color:#FF0000;
background:#fff;
}
.ctn{ 
padding-top:40px; 
padding-bottom:20px; 
padding-left:10px;}
.cle{ clear:both; height:0px;}
</STYLE>  <META content="MSHTML 6.00.2800.1589" name=GENERATOR></HEAD>  
<BODY>  <div class="tab"><div class="menu"><ul><li id="m1" onmouseover="gettab(1)" class="tabhover">標題一</li><li id="m2" onmouseover="gettab(2)">標題二</li><li id="m3" style="border-right:none" onmouseover="gettab(3)">標題三</li>    </ul></div><div class="cle"></div><div class="ctn"><div id="c1">此處顯示一的內容</div><div id="c2" style="display:none">此處顯示二的內容</div><div id="c3" style="display:none">此處顯示三的內容</div></div></div><div class="tab"><p>注意:<br>tab與li的寬度設置：98*3+2＝296</p>
</div><script type="text/javascript">function gettab(i) {for (n = 1; n <= 3; n++) {var m = document.getElementById("m" + n);var c = document.getElementById("c" + n);m.className = (n == i) ? "tabhover": "";c.style.display = (n == i) ? "block": "none";}}
</script></BODY></HTML>

6、HTML+CSS題。布置如下頁面（logo圖片我用了我自己的，O(∩_∩)O）

HTML部分

<div class="top"><div class="logo"><img src="my.jpg" /></div><div class="topmenu"><ul><li>menu 1</li><li>menu 2</li><li>menu 3</li></ul></div>
</div>
<div class="mainSection"><div class="leftmenu"><ul><li>menu 1</li><li>menu 2</li><li>menu 3</li></ul>            </div>    <div class="section"><div class="aside"><div class="text"><p>section 2s2section 2section 2section 2section 2section 2section 2section 2section 2sectection 2section 2section 2section 2section 2section 2section 2section 2section 2</p></div></div><div class="text"><h2>section 1</h2>        <p>section 1sectio2section 2section 2section 2section 2section 2section 2section 2section 2sectn 1section 1section 1section 1section 1section 1section 1section 1section 1section 1</p><h2>section 2</h2><p>section 2section 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2section 2</p><h2>section 3</h2><p>section 2section 2n 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sen 2section 2section 2section 2section 2section 2section 2section 2section 2sect2section 2section 2section 2section 2section 2section 2section 2sesection 2section 2section 2section 2section 2section 2section 2section 2section 2</p></div></div><div style="clear:both"></div> 
</div>
<div class="footer">footer</div>

其中，

1）text div是用來讓顯示內容和其他box之間產生間隙的

2）最后的空<div style="clear:both"></div>用來消除3px的bug，是footer緊接著mainSection布局

CSS部分

*{margin:0px;border:0px;padding:0px;}
.top{margin:0 auto;    //居中width:950px;border:1px solid blue;margin-top:10px;
}
.logo{padding:10px;
}
.topmenu{margin-left:180px;
}
.topmenu ul li{display:inline-block;list-style:none;padding:5px;background:blue;
}
.mainSection{margin:0 auto;width:950px;border:1px solid blue;border-top:0px;background:blue;
}
.leftmenu{float:left;width:180px;    //注意：section和leftmenu的width必須同時給出，不然布局會變形
}
.leftmenu ul li{color:white;list-style:none;padding:5px;
}
.section{background:white;float:left;width:770px;   //注意：原因慢慢去找
}
.aside{float:right;width:300px;height:200px;clear:left;    //使得section能環繞aside
}
.footer{clear:both;    //清除默認布局margin:0 auto;text-align:center;background:#ccc;width:950px;height:40px;border:1px solid blue;border-top:0px;
}
.text{padding:15px;}