前幾天參加了阿里的筆試題,題目雖然很簡單,但是現在回想下發現出了不少問題,還是基礎不牢固啊。把這些題目寫出來也算是對自己的一種提升吧。
1.html題

代碼:
<!DOCTYPE html>
<html>
<head>
</head>
<style>
table,td,th{
border: 1px solid #000;
border-collapse: collapse;
text-align: center;
}
</style>
<body>
<table class="table" cellspacing="0">
<thead>
<tr>
<th>國家</th>
<th>名稱</th>
<th>域名</th>
<th>排名</th>
</tr>
</thead>
<tbody>
<tr>
<td>中國</td>
<td>淘寶</td>
<td>www.taobao.com</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">美國</td>
<td>epay</td>
<td>www.epay.com</td>
<td>2</td>
</tr>
<tr>
<td>amazon</td>
<td>www.epay.com</td>
<td>3</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4" style="text-align:right">www.a.com</td>
</tr>
</tfoot>
</table>
</body>
</html>
2.css選擇器的縮寫,具體代碼記不清楚了,就是涉及background、font、#000000之類、后代選擇器的縮寫
3.先是語義化一個登錄界面,然后是實現css部分(圓角半透明)。當時是想不起來如何實現半透明,找了找資料,發現是通過rgba(r,g,b,a)中的a來實現開透明的,還是基礎知識掌握的不牢固啊。下面是自己寫的代碼,顏色背景什么的沒有細致調整,樣子大致是這樣。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#login{
position: relative;
margin: 0 auto;
width: 300px;
border: 10px solid rgba(0,0,0,0.4);
border-radius: 3px;
}
#delete{
overflow: hidden;
background: #555;
}
#delete input{
float: right;
width: 28px;
background: url(img/delete.png) no-repeat right top #555;
}
#login h3{
background: rgb(240, 173, 173);
padding: 5px 10px;
}
#loginForm{
padding: 10px;
}
#loginForm div{
margin: 5px;
}
#submit{
text-align: center;
}
#submit input{
margin: 0 10px;
}
</style>
</head>
<body>
<div id="login">
<div id="delete">
<input type="button" />
</div>
<h3>淘寶登錄頁面</h3>
<form id="loginForm" action="" method="post">
<div id="user">
<label for="userName"> 用戶名: </label>
<input type="text" id="userName"/>
</div>
<div id="password">
<label for="password"> 密 碼: </label>
<input type="password" id="password" />
</div>
<div id="submit">
<input type="submit" value="登 錄" /><a>請注冊</a>
</div>
</form>
</div>
</body>
</html>
4.查找頁面中所有類為test的節點,當時是對document.body.childNodes進行遍歷,沒有想到子節點還有可能擁有子節點,此題就此倒下,貼出一個可行的吧:
function getByClass(test){
var lists = document.getElementsByTagName('*');
var result = [];
var reg = new RegExp('\\b'+test+'\\b');
for(var i=0,len=lists.length;i<len;i++){
if(reg.test(lists[i].className)){
result.push(lists[i]);
}
}
return result;
}
5.刪除數組中的重復節點
if(! Array.prototype.unique){
Array.prototype.unique = function(){
var arr = this, temp = [], result = [];
for(var i=0,len=arr.length;i<len;i++){
if(!temp[arr[i]]) {
result.push(arr[i]);
temp[arr[i]] = true;
}
}
return result;
}
}
6.談談對前端工程師的認識?這種題目就看自己發揮了。
