完成一题即可通过的前端笔试题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

已注册用户请登录

外包信息请发到 /go/outsourcing 节点。

不要把相同的信息发到不同的节点

这是一个创建于 4814 天前的主题，其中的信息可能已经有所发展或是发生改变。

完整试题请访问 http://www.duitang.com/static/frontend.html

前端笔试题：
1、众所周知，字体设置为“宋体”的情况下，每个英文字符占位宽度是相同的。而在“Tahoma”字体下，每个英文字符的占位宽度不尽相同。问题：请编写程序找出“Tahoma”字体下，一个空格字符跟[a-z]中的哪些字符占位宽度一样？

2.1、 xxx 网页有一flash制作的趋势图，编写程序从中挖掘出“日期/价格”数据，并制作成table 表格如下。（注意：此题提交物是一段js，可把目标页面里的相关代码片段copy过来然后编写程序）

2.2、模仿新浪微博图片查看功能。
要求：
a) 缩略状态下使用缩略图，最宽200px
b) 放大状态下使用原图，最宽600px
c) 有左右旋转功能
d) 图片有预先加载
e) 补充你认为合理的交互行为，比如scrollbar 定位

3、设 A = $("#id a")，B = $("#id .c a")，求 A - B。要求：a) 不能用 jQuery 等框架；b) 兼容 IE6 在内的各大浏览器；c) 尽可能高效；d) 尽可能简短。

4、纯css题。以下图为标准，做一个账号输入框。要求：输入框的宽度随浏览器宽度改变而改变

5、纯css题。不使用图片实现下面的旋转效果

宽度

编写程序

占位

58 条回复 1970-01-01 08:00:00 +08:00

balibell

2012-08-09 12:02:51 +08:00

可投递简历到 [email protected] 如果你想做前端开发，可直接投给 [email protected]

balibell

2012-08-09 12:12:11 +08:00

堆糖网（上海）前端开发岗位：
*招应届毕业生薪资范围 4000-5000
*招1年以上工作经验薪资范围 5000-10000

chairo

2012-08-09 12:13:35 +08:00

图呢？没图这不骗人呢

balibell

2012-08-09 12:20:39 +08:00

@chairo 什么图？详题见 http://www.duitang.com/static/frontend.html

Hyperion

2012-08-09 12:56:00 +08:00

/擦汗, 会是都会, 但可惜还没毕业... rz

balibell

2012-08-09 13:20:57 +08:00

@Hyperion 如果在上海的话，可以来实习哦。

luin

2012-08-09 13:48:11 +08:00

弱弱地问一句第3题的A - B是啥意思....

balibell

2012-08-09 13:51:34 +08:00

@luin 集合A - 集合B 即两个集合的差集

chairo

2012-08-09 14:00:39 +08:00

@balibell 还用说，你上文提到的「下图」……

还要多点一个链接…用户体验不爽啊

俺半年前帖子都被你翻出来了…

balibell

2012-08-09 14:08:52 +08:00

@chairo 哈，原来如此。v2ex 创建主题能添加图片吗？

chairo

2012-08-09 14:11:43 +08:00

@balibell 可以。参考别人帖子比如：/t/44599 等等

balibell

2012-08-09 14:19:03 +08:00

@chairo 晕，这不是让我猜吗~ 好吧，我直接把图片地址放进去

chairo

2012-08-09 14:24:07 +08:00

@balibell 体会到没文档的悲催了吧？哈哈。友情提醒下，发错帖子可没办法自己删的哦。要不断重发不断重试哦~再友情提醒，v2ex可以发图片的图床是有限的哦~不是任意图片都能发的哦~

希望这一个下午时间您能摸索出来怎么发图片哦~亲。

balibell

2012-08-09 14:25:29 +08:00

重发下第4题
4、纯css题。以下图为标准，做一个账号输入框。要求：输入框的宽度随浏览器宽度改变而改变
http://cdn.duitang.com/uploads/people/201208/06/20120806162035_VZA3n.jpeg

qianleilei

2012-08-09 14:36:05 +08:00

工资好低。

balibell

2012-08-09 14:55:11 +08:00

@qianleilei 上海这边的行情基本是这样了，你是觉得下限低了，还是上限低了？

tokki

2012-08-09 14:58:25 +08:00

这薪水。。不过1年经验的还好

qianleilei

2012-08-09 15:03:21 +08:00

@balibell 上海这么低么？我只是路过。

aveline

2012-08-09 15:27:45 +08:00

倒是会...可是...
我不是做前端的XD

balibell

2012-08-09 15:36:36 +08:00

@aveline 是什么让你不做前端了~ 前端涉足广着呢，android ios 开发到底都还是前端开发领域。把题目介绍给对前端感兴趣的朋友们吧，做的越多，薪水越高哈~

twm

2012-08-09 15:41:19 +08:00

薪水太低了。。

benzhe

2012-08-09 15:44:53 +08:00

( ° д ° ) 又是上海...

balibell

2012-08-09 15:44:58 +08:00

@twm 你是觉得应届生的薪资范围太低是吧。5000 - 6000 你觉得呢？

balibell

2012-08-09 15:48:37 +08:00

@benzhe 来上海吧，机会更多。

aveline

2012-08-09 16:58:12 +08:00

@balibell 做了三题玩玩...不难XD

ultragtx

2012-08-09 17:14:29 +08:00

“android ios 开发到底都还是前端开发领域”
你说的是webapp吧

balibell

2012-08-09 17:33:41 +08:00

@ultragtx 算是吧，另外转一个淘宝UED招聘贴： http://weibo.com/1644956733/ywn6khq92

manhere

2012-08-09 17:41:03 +08:00

@balibell [email protected] 邮箱错了吧？

balibell

2012-08-09 17:44:55 +08:00

@manhere 兄弟，你太对了~ 还好后面一个没错。

zzcflying

2012-08-09 17:50:36 +08:00

第一题第二题已经做完，正在做第三题。

zzcflying

2012-08-09 17:51:19 +08:00

@balibell 你的第一题有问题，在不同浏览器下答案不同

balibell

2012-08-09 18:00:00 +08:00

@zzcflying 检查下你设置的字体有没有问题。有兴趣的话可以把简历投给我 [email protected]

zzcflying

2012-08-09 18:03:27 +08:00

@balibell 不会吧。IE和Chrom答案是t，j，f。在firefox下是了l,i,j。如果字体大小设置不同，结果也不同。

yun77op

2012-08-09 18:11:29 +08:00

毫无压力

balibell

2012-08-09 18:14:55 +08:00

@zzcflying 可以用这个验证
alert($('<span> </span>').appendTo('body').width())
alert($('<span>j</span>').appendTo('body').width())

balibell

2012-08-09 18:16:32 +08:00

@yun77op 哈，记得投简历哦~

zzcflying

2012-08-09 18:17:07 +08:00

@balibell 我把第一第二题的代码发给你，你测试下吧先。不过A-B这题不明白什么意思

zzcflying

2012-08-09 18:21:21 +08:00

第五题完成。

balibell

2012-08-09 18:21:36 +08:00

@zzcflying 集合A - 集合B 即集合A 和集合B 的差集

zzcflying

2012-08-09 18:38:10 +08:00

@balibell 上海太远了。而且我刚毕业，感觉实在是太低了。

jjlovegrape

2012-08-09 18:55:31 +08:00

看了LZ的笔试题觉得自己拿的工资很惭愧。

benzhe

2012-08-09 19:21:05 +08:00

@balibell 完成所有题目就“一定能入职”还是只“通过笔试”？话说个人觉得这些题用来考查有工作经验的人来说有点初级了

Hyperion

2012-08-09 19:22:19 +08:00

上海土著表示马上就要专科二年级了... 不过, 我还有点不大敢来找实习, 总觉得自己水平不够...
还没有脱离手册的勇气和对自己代码无bug的信心... 唉...

balibell

2012-08-09 19:26:59 +08:00

@benzhe 你说的很对啊。这些题目都是工作实践沉淀的果实，一是用来做初步筛选用的，二是分享出来给那些还未出茅庐的前端爱好者们练手用的。

balibell

2012-08-09 19:31:47 +08:00

@Hyperion 话说才听到一个，讲的是一个大二出来闯荡做游戏开发的，在同级同学正常毕业的那一年拿几十w年薪的故事。当然这只是故事的一面。我倒觉得，不是所有人都希望走这样的路。

riophae

2012-08-10 01:35:32 +08:00

第一题好简单啊...

zzcflying

2012-08-10 11:12:17 +08:00

我的2.5答案。
<style>
body,*{margin:0px; padding:0px;}
.weirao{
height:200px;
width:200px;
}
.outer{
height:50px;
width:100px;
overflow: hidden;
-webkit-animation-duration:10s;
-webkit-animation-timing-function: ease;
-webkit-animation-name:xuanzhuan;
position:absolute;
margin-top:40px;
margin-left:40px;
}
.yinying{
width:100px;
height:100px;
border-radius:50px;
background:blue;
}
.circle{
width:80px;
height:80px;
-webkit-border-radius: 40px;
-webkit-box-shadow:0px 0px 5px #333333;
background:-webkit-gradient(radial, 50% 70%, 0, 38 38, 38, from(#fff), to(#999));
position:relative;
top:10px;
left:10px;
}
@-webkit-keyframes xuanzhuan {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);

}
}
</style>

zzcflying

2012-08-10 11:12:31 +08:00

balibell

2012-08-10 13:45:32 +08:00

@zzcflying 第5题chrome 下的效果好像有点偏差。中心的球是不旋转的。

Hyperion

2012-08-10 14:18:40 +08:00

@zzcflying ...类的命名有些糟糕... 拼音...

zzcflying

2012-08-10 14:22:50 +08:00

@balibell 我重新写了。
<style>
body,*{margin:0px; padding:0px;}
.weirao{
height:200px;
width:200px;
}
.xuanzhuan{
width: 100px;
height: 100px;
position: absolute;
margin-left: 50px;
margin-top: 30px;
-webkit-animation-name: xuanzhuan;
-webkit-animation-duration: 3s;
-webkit-animation-timing-function: ease;
}
.outer{
height:50px;
width:100px;
overflow:hidden;
margin:0 auto;
}
.yinying{
width:100px;
height:100px;
border-radius:50px;
position:relative;
top:0px;
background:blue;
}
.circle{
width:80px;
height:80px;
-webkit-border-radius: 40px;
-webkit-box-shadow:0px 0px 5px #333333;
background:-webkit-gradient(radial, 50% 70%, 0, 38 38, 38, from(#fff), to(#999));
position:absolute;
margin-top:40px;
margin-left:60px;
}
@-webkit-keyframes xuanzhuan {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
</style>
<div class="weirao">
<div class="xuanzhuan">
<div class="outer">
<div class="yinying">

</div>
</div>
</div>
<div class="circle"></div>
</div>

zzcflying

2012-08-10 14:23:32 +08:00

@Hyperion 我不是专业写css的，我专业些js和python的。

balibell

2012-08-10 18:37:26 +08:00

@zzcflying 加上这个 -webkit-animation-iteration-count: infinite; 就完美了

inmind

2012-08-10 18:41:57 +08:00

<!DOCTYPE html>
<html>
<head>
<title>transition</title>
<style>
#a{position:absolute;top:200px;left:200px;width: 400px;height: 400px;}
#a_a{position:relative;width: 400px;height: 400px;}
.aa{
-webkit-transform: rotate(360deg);
-webkit-animation-name: aa;
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.aa{
-moz-transform: rotate(360deg);
-moz-animation-name: aa;
-moz-animation-duration: 4s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
.aa{
-o-transform: rotate(360deg);
-o-animation-name: aa;
-o-animation-duration: 4s;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
}
.aa{
-ms-transform: rotate(360deg);
-ms-animation-name: aa;
-ms-animation-duration: 4s;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
}
#a_a_a{position:relative; width: 400px;height: 400px;border-radius: 200px; background-color:#00F;}

#a_a_b{position: absolute;top: 0;left: 0;width: 400px;height: 225px;background: #FFF;}
#a_a_b_a, #a_a_b_b{position:absolute;top:200px;width:50px;height:25px;background-color:#00F;border-top-left-radius:25px;border-top-right-radius:25px;}
#a_a_b_a{left:2px;}
#a_a_b_b{left:348px;}

#a_b{position: absolute;top: 50px;left: 50px;width: 300px;height: 300px;box-shadow: 0 0 50px;border-radius: 150px;background:-webkit-radial-gradient(60% 75%, white, #000);text-align: center;}
@-webkit-keyframes aa {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}

}
@-moz-keyframes aa {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}

}
@-o-keyframes aa {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}

}
@-ms-keyframes aa {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}

}

</style>
<script>

</script>
</head>
<body>

<div id="a">
<div id="a_a" class="aa">
<div id="a_a_a">

</div>
<div id="a_a_b">
<div id="a_a_b_a"></div>
<div id="a_a_b_b"></div>
</div>
</div>
<div id="a_b"></div>
</div>

</body>
</html>

kran

2012-08-10 19:18:05 +08:00

指的是不能查资料的情况下吗？

balibell

2012-08-10 19:54:19 +08:00

@kran 这些都是开放题，现在不流行闭卷考了。有兴趣直接投简历给 [email protected] 哈。

zzcflying

2012-08-11 13:19:03 +08:00

@balibell 嗯，是哦。

balibell

2012-08-11 19:01:45 +08:00

第4题纯css题

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" cOntent="IE=edge,chrome=1"/>
<title>堆糖</title>
</head>

<body>
<style type="text/css">
.wrap{padding:8px 0 8px 0;border:1px solid #ccc;border-radius:4px;color:#666;}
.left{width:60px;padding:0 8px;float:left;line-height:31px;text-align:right;}
.right{width:120px;padding:0 8px;float:right;line-height:31px;}
.center{+float:left;overflow:hidden;}
.colum{margin-bottom:-10000px;padding-bottom:10000px;}
.center div input{height:19px;margin:4px 0 0;padding:0 4px 2px;border:0 none;border-bottom:1px solid #ccc;outline:none}
</style>
<div class="wrap">
<div class="left colum">用户名</div>
<div class="right colum">(2-20 个汉字)</div>
<div class="center colum">
<div style="overflow:hidden;width:100%;">
<input type="text" style="width:100%" value=""/>
</div>

<span style="float:right; font-size:0; "> </span>
</div>
<div style="clear:both;font-size:0"> </div>
</div>

<style type="text/css">
.tbwrap{width:100%;padding:8px 0 8px 0;border:1px solid #ccc;border-radius:4px;line-height:31px;color:#666;}
.tbleft{width:60px;padding:0 8px;text-align:right;}
.tbright{width:120px;padding:0 8px;}
.tbcenter div input{height:19px;margin:4px 0 0;padding:0 4px 2px;border:0 none;border-bottom:1px solid #ccc;outline:none}
</style>
<table class="tbwrap" cellspacing="0" cellpadding="0">
<tr>
<td class="tbleft">用户名</td>
<td class="tbcenter">
<div style="overflow:hidden;width:100%;">
<input type="text" style="width:100%" value=""/>
</div>
</td>
<td class="tbright">(2-20 个汉字)</td>
</tr>
</table>

<script type="text/Javascript">

</script>
</body>
</html>