• 2013年阿里巴巴实习生笔试题


        前几天参加了阿里的笔试题,题目虽然很简单,但是现在回想下发现出了不少问题,还是基础不牢固啊。把这些题目写出来也算是对自己的一种提升吧。

        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;
    	     300px;
    	    border: 10px solid rgba(0,0,0,0.4);
    	    border-radius: 3px;
    	}
    		#delete{
    			overflow: hidden;
    			background: #555; 
    		}
    		#delete input{ 
    			float: right;
    			 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.谈谈对前端工程师的认识?这种题目就看自己发挥了。

  • 相关阅读:
    js 比较日期的大小
    日历(从今天起后面的14天)
    数字转大写
    object对象进行深拷贝
    浏览器渲染机制
    t-5.倒计时(秒杀效果)--本地--服务器(待续)
    s-1.rem自适应
    t-3.跑马灯
    t-2.手机端简单轮播(无滑动效果)
    16.弹性布局
  • 原文地址:https://www.cnblogs.com/shamoguying1140/p/3070193.html
Copyright © 2020-2023  润新知