• 外包信息请发到 /go/outsourcing 节点。
• 不要把相同的信息发到不同的节点
这是一个创建于 4515 天前的主题，其中的信息可能已经有所发展或是发生改变。
完整试题请访问 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题。不使用图片实现下面的旋转效果
前端笔试题：
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题。不使用图片实现下面的旋转效果
 |
1
balibell OP 可投递简历到 [email protected] 如果你想做前端开发，可直接投给 [email protected]
|
|
2
balibell OP 堆糖网（上海）前端开发岗位：
*招应届毕业生 薪资范围 4000-5000 *招1年以上工作经验 薪资范围 5000-10000 |
 |
3
chairo 2012-08-09 12:13:35 +08:00  1
图呢？没图这不骗人呢
|
|
4
balibell OP |
 |
5
Hyperion 2012-08-09 12:56:00 +08:00
/擦汗, 会是都会, 但可惜还没毕业... 囧rz
|
 |
7
luin 2012-08-09 13:48:11 +08:00
弱弱地问一句第3题的A - B是啥意思....
|
|
13
chairo 2012-08-09 14:24:07 +08:00
@balibell 体会到没文档的悲催了吧？哈哈。友情提醒下，发错帖子可没办法自己删的哦。要不断重发不断重试哦~再友情提醒，v2ex可以发图片的图床是有限的哦~不是任意图片都能发的哦~
希望这一个下午时间您能摸索出来怎么发图片哦~亲。 |
|
14
balibell OP 重发下第4题
4、纯css题。以下图为标准，做一个账号输入框。要求：输入框的宽度随浏览器宽度改变而改变 http://cdn.duitang.com/uploads/people/201208/06/20120806162035_VZA3n.jpeg |
 |
15
qianleilei 2012-08-09 14:36:05 +08:00
工资好低。
|
|
16
balibell OP @qianleilei 上海这边的行情基本是这样了，你是觉得下限低了，还是上限低了？
|
 |
17
tokki 2012-08-09 14:58:25 +08:00 1
这薪水。。 不过1年经验的还好
|
|
18
qianleilei 2012-08-09 15:03:21 +08:00 1
@balibell 上海这么低么？我只是路过。
|
 |
19
aveline 2012-08-09 15:27:45 +08:00
倒是会...可是...
我不是做前端的XD |
|
20
balibell OP @aveline 是什么让你不做前端了~ 前端涉足广着呢，android ios 开发到底都还是前端开发领域。把题目介绍给对前端感兴趣的朋友们吧，做的越多，薪水越高哈~
|
 |
21
twm 2012-08-09 15:41:19 +08:00
薪水太低了。。
|
 |
22
benzhe 2012-08-09 15:44:53 +08:00
ლ( ° д ° ლ ) 又是上海...
|
 |
26
ultragtx 2012-08-09 17:14:29 +08:00
“android ios 开发到底都还是前端开发领域”
你说的是webapp吧 |
|
27
balibell OP @ultragtx 算是吧，另外转一个淘宝UED招聘贴： http://weibo.com/1644956733/ywn6khq92
|
 |
28
manhere 2012-08-09 17:41:03 +08:00
@balibell [email protected] 邮箱错了吧？
|
 |
30
zzcflying 2012-08-09 17:50:36 +08:00
第一题第二题已经做完，正在做第三题。
|
|
32
balibell OP @zzcflying 检查下你设置的字体有没有问题。有兴趣的话可以把简历投给我 [email protected]
|
|
33
zzcflying 2012-08-09 18:03:27 +08:00
@balibell 不会吧。IE和Chrom答案是t，j，f。在firefox下是了l,i,j。如果字体大小设置不同，结果也不同。
|
 |
34
yun77op 2012-08-09 18:11:29 +08:00
毫无压力
|
|
35
balibell OP @zzcflying 可以用这个验证
alert($('<span> </span>').appendTo('body').width()) alert($('<span>j</span>').appendTo('body').width()) |
|
38
zzcflying 2012-08-09 18:21:21 +08:00
第五题完成。
|
 |
41
jjlovegrape 2012-08-09 18:55:31 +08:00
看了LZ的笔试题觉得自己拿的工资很惭愧。
|
|
43
Hyperion 2012-08-09 19:22:19 +08:00
上海土著表示马上就要专科二年级了... 不过, 我还有点不大敢来找实习, 总觉得自己水平不够...
还没有脱离手册的勇气和对自己代码无bug的信心... 唉... |
|
44
balibell OP @benzhe 你说的很对啊。这些题目都是工作实践沉淀的果实，一是用来做初步筛选用的，二是分享出来给那些还未出茅庐的前端爱好者们练手用的。
|
|
45
balibell OP @Hyperion 话说才听到一个，讲的是一个大二出来闯荡做游戏开发的，在同级同学正常毕业的那一年拿几十w年薪的故事。当然这只是故事的一面。我倒觉得，不是所有人都希望走这样的路。
|
 |
46
riophae 2012-08-10 01:35:32 +08:00
第一题好简单啊...
|
|
47
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> |
|
48
zzcflying 2012-08-10 11:12:31 +08:00
<body>
<div class="weirao"> <div class="outer"> <div class="yinying"> <div class="circle"></div> </div> </div> </div> </body> |
|
51
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> |
|
53
balibell OP @zzcflying 加上这个 -webkit-animation-iteration-count: infinite; 就完美了
|
 |
54
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> |
 |
55
kran 2012-08-10 19:18:05 +08:00
指的是不能查资料的情况下吗？
|
|
56
balibell OP @kran 这些都是开放题，现在不流行闭卷考了。有兴趣直接投简历给 [email protected] 哈。
|
|
58
balibell OP 第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> <!-- for ie --> <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> |
Select Language