你的分享就是我们的动力 ---﹥

2014阿里前端线上笔试题

时间:2013-11-06 17:26来源:www.chengxuyuans.com 点击:
8月20号阿里巴巴前端岗位校园招聘的线上笔试题,因为是面向2014界的应届生,哥不符合要求了,但也看了看题,哥也不是什么前端大拿,必然无法评价题的质量了,不过玉伯,寒冬等大拿都评价题还是不错的,区分度很好,由于题目是随机的,囧。自码答案,有误欢迎指正,部分问题还没添加答案~

No.1

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

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

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 中水平方向和垂直方向居中

No.3

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

T17wqkFXtXXXcDECcS-547-180

请通过代码完成它,它至少应该:
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是对运行结果的影响.

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>

请写出其css代码.

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:nonevisibility: 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库)

转载注明地址:http://www.chengxuyuans.com/web_technology/70125.html