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

完整试题请访问 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题。不使用图片实现下面的旋转效果

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 这些都是开放题，现在不流行闭卷考了。有兴趣直接投简历给 balibell@duitang.com 哈。

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>