前幾天參加了阿里的筆試題,題目雖然很簡單,但是現在回想下發現出了不少問題,還是基礎不牢固啊。把這些題目寫出來也算是對自己的一種提升吧。
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.談談對前端工程師的認識?這種題目就看自己發揮了。