2014阿里前端线上笔试题

来源：互联网发布：网络直播招聘范文编辑：程序博客网时间：2024/06/05 17:34

2014年阿里前端线上题，自己做了一遍，现在附上答案。但是声明：本人也是菜鸟一名，答案贴出是为了和大家交流的，不保证正确性，欢迎大家指正内容的错误及不恰当之处。

8月20号阿里巴巴前端岗位校园招聘的线上笔试题，（来自：http://www.tuicool.com/articles/YbQB3q）

No.1

下图绿色区域的宽度为100%，其中有三个矩形，第一个矩形的宽度是200px，第二个和第三个矩形的宽度相等。请使用 css3 中的功能实现它们的布局。
col
已知 html 结构是：

<div> <div>column 1</div> <div>column 2</div> <div>column 3</div></div>

答案：

<style>div.divwapper{ width:100%;}div.column1{float:left;width:200px;border:solid #00868B;border-width:15px;background-color:#F5F5DC;}div.column2{float:left;width:70px;border:solid #00868B;border-top-width:15px;border-bottom-width:15px;border-right-width:15px;background-color:#F5F5DC;}div.column3{float:left;width:70px;border:solid #00868B;border-top-width:15px;border-bottom-width:15px;border-right-width:15px;background-color:#F5F5DC;}</style>

<body><div class="divwapper"><div class="column1">column 1</div><div class="column2">column 2</div><div class="column3">column 3</div></div></body>

运行结果

No.2

有两个盒子 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 中水平方向和垂直方向居中

答案：水平位置居中：margin：0 auto；

垂直位置居中：

top:50%;
　　 margin-top:-250px;
　　 width:500px; /*此时宽和高都要固定*/
　　 heigth:500px;

No.3

经常在SNS中看到如下图所示的功能：

请通过代码完成它，它至少应该：
1. 良好结构、语义化的HTML
2. 兼容主流的浏览器；
3. JS应该包括： 1) 实时计数功能 2)校验字数限制 3) 防止重复提交；
4. 如果时间所限，无法100%，但请说明实现方案及思路；

图呢？？

No.4

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是对运行结果的影响.

答案：先是0，再是2，最后是3。

setTimeout(code,millisec);是指millisec值的毫秒时间内，运行code，且只运行一次哦。

因为test里的两个alert都延迟了，一次会先执行alert(0),再执行，alert（a）这个时候，a已经被赋值为2，所以会弹出2

No.5

当我们使用CSS3新属性，比如：box-shadow或者transition时，我们怎么检测浏览器是否支持这些属性？
请设计一个 javascript 函数，该函数接受一个CSS属性名作为参数，并返回一个boolean值，表明浏览器是否支持这个属性。

No.6

如果你现在使用的是 Google Chrome 或 Apple Safari，如何让 input 元素在默认情况下显示 “alipay WD Team”，而在光标移入后则显示空白？

No.7

alert(Function instanceof Object);alert(Object instanceof Function);

No.8

//现有代码如下：
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函数?

No.9

实现如下图所示的布局
要求：
sidebar 固定宽度200px，content和header宽度自适应
当window宽度小于600px时，变成三行布局

默认如下
T1fC9gFjNbXXcmzizJ-263-80
宽度小于600px时如下
T1bwKfFepeXXc_3Knr-160-135
下面是html结构：

<div class='header'>            <h1>header</h1>        </div>        <div>sidebar"</h1>        </div>        <div>            <h1>content</h1>        </div>

No.10

写一段脚本，实现：当页面上任意一个链接被点击的时候，alert出这个链接在页面上的顺序号，如第一个链接则alert(1), 依次类推；

No.11

请用 html5 标准完成以下页面布局（要求完整书写整个页面的html代码，不需要写CSS）
html5

No.12

有一个页面区块如图所示，请用符合语义化的标签书写HTML代码。

T16eugFbldXXc4u1TV-352-206

No.13

在CSS样式中常使用px、em两种长度单位，各有什么优劣，在表现上有什么区别？

No.14

(new Date).getTime() 和 +new Date() 都可以取到当前时间戳，它们的实现原理是什么，哪个效率更高？

No.15

在tmall.com的某个页面中存在一个id等于J_iframe_taobao的iframe，该iframe的域名是taobao.com。在不考虑IE浏览器的情况下，用最简洁的代码实现页面与该iframe进行双向通信？

...<iframe id="J_iframe_taobao" src="http://taobao.com/xxx"></iframe>...

No.16

请写一个 getParents 方法让它可以获取某一个 DOM 元素的所有父亲节点。

No.17

请写出至少5个html5新增的标签，并说明其语义和应用场景

No.18

有哪些前端代码优化/性能优化的方法？

No.19

请列举所知道的css选择器，并说明怎么判断优先级？

No.20

有一个数组，其中保存的都是小写英文字符串，现在要把它按照除了第一个字母外的字符的字典顺序(字典顺序就是按首字母从a-z顺序排列，如果首字母相同则按第二个字母……)排序，请编写代码：

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

No.21

1.你了解arguments对象么,它有哪些属性?
2.arguments是数组么?如果不是请写一段代码将其转化为真正的数组,什么情况下需要这么做?
3.arguments有什么特性,可以用这些特性做什么?

No.22

请为JavaScript每个Array对象添加一个类似于PHP的shuffle()的方法。

No.23

CSS的“伪类”和“伪元素”有什么区别？请举例伪元素的几种应用场景。

No.24

页面中有个id为J_banner的区块，请使用CSS实现在普通屏幕上使用图片banner.png为背景，在retina屏幕上显示更高分辨率的图片banner_retina.png作为背景

<div id="J_banner"> ... </div>

No.25

下面是一段html代码，展示效果如图A所示。请给出一段css，使这段代码达到图B的展示效果。
T1WyOhFaFdXXc_8FLc-666-410

<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.不要求严格对齐，如有需要，元素尺寸可自定义。

No.26

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]

No.27

//请补全下面的函数，仅当p为数组时返回true.
//可给出多种实现方式,每种实现方式不一定完美,如果不完美,需要说明每种实现的限制
function isArray(p) {
//你的代码在这里
}

No.28

<p>1</p><p>2</p><p>3</p>

请编写一段css，让数字1颜色变蓝

No.29

请让页面中的一个元素（10px*10px）围绕坐标(200, 300) 做圆周运动

No.30

用HTML实现下面表格的结构：
table

No.31

‘data-’属性的作用是什么？

No.32

请列举CSS中用于隐藏元素的两个属性？两者的差异？

display:none 和 visibility: hidden; 前者不占位，后者占位。

No.33

在 jquery 中，选择器使用的是sizzle，sizzle的基本原理是”从后往前查找”，比如选择器“ .a > .b > .c”，是先查找”.c”而不是”.a”。请解释为什么大部分情况下“从后往前”比“从前往后”查找速度更快

No.34

//现有代码如下:
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的值是多少,并请说明原因.

No.35

请编写一段程序，将一个对象和它直接、间接引用的所有对象的属性字符串放入一个数组。

如
var o = {a:1,{b:2,c:{d:1}}}

这里o经过处理后，应该得到
["a","b","c","d"]

No.36

请举两个例子，解释一下strong和em标签用法有何不同？

No.37

请用实现一个最简单的输入框提示功能
T1jdqeFh8fXXbqUazF-330-57
要求：
1.输入框内默认显示提示文案，当用户点击输入框后，光标定位到输入框最前，并继续显示提示文案，当用户输入后替换默认提示文案，当用户清空输入框后从新显示默认提示文案
2.要求支持ie（6，7，8，9），firefox，chrome等浏览器
3.请写出html结构，javascript代码逻辑部分写出实现思路即可（有时间能写出代码者最佳，可以使用js库）

0 0