V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 外包信息请发到 /go/outsourcing 节点。
• 不要把相同的信息发到不同的节点
balibell
V2EX  ›  酷工作

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

  •  
  •   balibell · 2012-08-09 11:59:43 +08:00 · 7993 次点击
    这是一个创建于 4473 天前的主题,其中的信息可能已经有所发展或是发生改变。
    完整试题请访问 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
        1
    balibell  
    OP
       2012-08-09 12:02:51 +08:00
    可投递简历到 [email protected] 如果你想做前端开发,可直接投给 [email protected]
    balibell
        2
    balibell  
    OP
       2012-08-09 12:12:11 +08:00
    堆糖网(上海)前端开发岗位:
    *招应届毕业生 薪资范围 4000-5000
    *招1年以上工作经验 薪资范围 5000-10000
    chairo
        3
    chairo  
       2012-08-09 12:13:35 +08:00   ❤️ 1
    图呢?没图这不骗人呢
    balibell
        4
    balibell  
    OP
       2012-08-09 12:20:39 +08:00
    Hyperion
        5
    Hyperion  
       2012-08-09 12:56:00 +08:00
    /擦汗, 会是都会, 但可惜还没毕业... 囧rz
    balibell
        6
    balibell  
    OP
       2012-08-09 13:20:57 +08:00
    @Hyperion 如果在上海的话,可以来实习哦。
    luin
        7
    luin  
       2012-08-09 13:48:11 +08:00
    弱弱地问一句第3题的A - B是啥意思....
    balibell
        8
    balibell  
    OP
       2012-08-09 13:51:34 +08:00
    @luin 集合A - 集合B 即 两个集合的差集
    chairo
        9
    chairo  
       2012-08-09 14:00:39 +08:00
    @balibell 还用说,你上文提到的「下图」……

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

    俺半年前帖子都被你翻出来了…
    balibell
        10
    balibell  
    OP
       2012-08-09 14:08:52 +08:00
    @chairo 哈,原来如此。v2ex 创建主题能添加图片吗?
    chairo
        11
    chairo  
       2012-08-09 14:11:43 +08:00
    @balibell 可以。参考别人帖子比如:/t/44599 等等
    balibell
        12
    balibell  
    OP
       2012-08-09 14:19:03 +08:00
    @chairo 晕,这不是让我猜吗~ 好吧,我直接把图片地址放进去
    chairo
        13
    chairo  
       2012-08-09 14:24:07 +08:00
    @balibell 体会到没文档的悲催了吧?哈哈。友情提醒下,发错帖子可没办法自己删的哦。要不断重发不断重试哦~再友情提醒,v2ex可以发图片的图床是有限的哦~不是任意图片都能发的哦~

    希望这一个下午时间您能摸索出来怎么发图片哦~亲。
    balibell
        14
    balibell  
    OP
       2012-08-09 14:25:29 +08:00
    重发下第4题
    4、纯css题。以下图为标准,做一个账号输入框。要求:输入框的宽度随浏览器宽度改变而改变
    http://cdn.duitang.com/uploads/people/201208/06/20120806162035_VZA3n.jpeg
    qianleilei
        15
    qianleilei  
       2012-08-09 14:36:05 +08:00
    工资好低。
    balibell
        16
    balibell  
    OP
       2012-08-09 14:55:11 +08:00
    @qianleilei 上海这边的行情基本是这样了,你是觉得下限低了,还是上限低了?
    tokki
        17
    tokki  
       2012-08-09 14:58:25 +08:00   ❤️ 1
    这薪水。。 不过1年经验的还好
    qianleilei
        18
    qianleilei  
       2012-08-09 15:03:21 +08:00   ❤️ 1
    @balibell 上海这么低么?我只是路过。
    aveline
        19
    aveline  
       2012-08-09 15:27:45 +08:00
    倒是会...可是...
    我不是做前端的XD
    balibell
        20
    balibell  
    OP
       2012-08-09 15:36:36 +08:00
    @aveline 是什么让你不做前端了~ 前端涉足广着呢,android ios 开发到底都还是前端开发领域。把题目介绍给对前端感兴趣的朋友们吧,做的越多,薪水越高哈~
    twm
        21
    twm  
       2012-08-09 15:41:19 +08:00
    薪水太低了。。
    benzhe
        22
    benzhe  
       2012-08-09 15:44:53 +08:00
    ლ( ° д ° ლ ) 又是上海...
    balibell
        23
    balibell  
    OP
       2012-08-09 15:44:58 +08:00
    @twm 你是觉得应届生的薪资范围太低是吧。5000 - 6000 你觉得呢?
    balibell
        24
    balibell  
    OP
       2012-08-09 15:48:37 +08:00
    @benzhe 来上海吧,机会更多。
    aveline
        25
    aveline  
       2012-08-09 16:58:12 +08:00
    @balibell 做了三题玩玩...不难XD
    ultragtx
        26
    ultragtx  
       2012-08-09 17:14:29 +08:00
    “android ios 开发到底都还是前端开发领域”
    你说的是webapp吧
    balibell
        27
    balibell  
    OP
       2012-08-09 17:33:41 +08:00
    @ultragtx 算是吧,另外转一个淘宝UED招聘贴: http://weibo.com/1644956733/ywn6khq92
    manhere
        28
    manhere  
       2012-08-09 17:41:03 +08:00
    @balibell [email protected] 邮箱错了吧?
    balibell
        29
    balibell  
    OP
       2012-08-09 17:44:55 +08:00
    @manhere 兄弟,你太对了~ 还好后面一个没错。
    zzcflying
        30
    zzcflying  
       2012-08-09 17:50:36 +08:00
    第一题第二题已经做完,正在做第三题。
    zzcflying
        31
    zzcflying  
       2012-08-09 17:51:19 +08:00
    @balibell 你的第一题有问题,在不同浏览器下答案不同
    balibell
        32
    balibell  
    OP
       2012-08-09 18:00:00 +08:00
    @zzcflying 检查下你设置的字体有没有问题。有兴趣的话可以把简历投给我 [email protected]
    zzcflying
        33
    zzcflying  
       2012-08-09 18:03:27 +08:00
    @balibell 不会吧。IE和Chrom答案是t,j,f。在firefox下是了l,i,j。如果字体大小设置不同,结果也不同。
    yun77op
        34
    yun77op  
       2012-08-09 18:11:29 +08:00
    毫无压力
    balibell
        35
    balibell  
    OP
       2012-08-09 18:14:55 +08:00
    @zzcflying 可以用这个验证
    alert($('<span>&nbsp;</span>').appendTo('body').width())
    alert($('<span>j</span>').appendTo('body').width())
    balibell
        36
    balibell  
    OP
       2012-08-09 18:16:32 +08:00
    @yun77op 哈,记得投简历哦~
    zzcflying
        37
    zzcflying  
       2012-08-09 18:17:07 +08:00
    @balibell 我把第一第二题的代码发给你,你测试下吧先。不过A-B这题不明白什么意思
    zzcflying
        38
    zzcflying  
       2012-08-09 18:21:21 +08:00
    第五题完成。
    balibell
        39
    balibell  
    OP
       2012-08-09 18:21:36 +08:00
    @zzcflying 集合A - 集合B 即 集合A 和 集合B 的差集
    zzcflying
        40
    zzcflying  
       2012-08-09 18:38:10 +08:00
    @balibell 上海太远了。而且我刚毕业,感觉实在是太低了。
    jjlovegrape
        41
    jjlovegrape  
       2012-08-09 18:55:31 +08:00
    看了LZ的笔试题觉得自己拿的工资很惭愧。
    benzhe
        42
    benzhe  
       2012-08-09 19:21:05 +08:00
    @balibell 完成所有题目就“一定能入职”还是只“通过笔试”?话说个人觉得这些题用来考查有工作经验的人来说有点初级了
    Hyperion
        43
    Hyperion  
       2012-08-09 19:22:19 +08:00
    上海土著表示马上就要专科二年级了... 不过, 我还有点不大敢来找实习, 总觉得自己水平不够...
    还没有脱离手册的勇气和对自己代码无bug的信心... 唉...
    balibell
        44
    balibell  
    OP
       2012-08-09 19:26:59 +08:00
    @benzhe 你说的很对啊。这些题目都是工作实践沉淀的果实,一是用来做初步筛选用的,二是分享出来给那些还未出茅庐的前端爱好者们练手用的。
    balibell
        45
    balibell  
    OP
       2012-08-09 19:31:47 +08:00
    @Hyperion 话说才听到一个,讲的是一个大二出来闯荡做游戏开发的,在同级同学正常毕业的那一年拿几十w年薪的故事。当然这只是故事的一面。我倒觉得,不是所有人都希望走这样的路。
    riophae
        46
    riophae  
       2012-08-10 01:35:32 +08:00
    第一题好简单啊...
    zzcflying
        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>
    zzcflying
        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>
    balibell
        49
    balibell  
    OP
       2012-08-10 13:45:32 +08:00
    @zzcflying 第5题chrome 下的效果好像有点偏差。中心的球是不旋转的。
    Hyperion
        50
    Hyperion  
       2012-08-10 14:18:40 +08:00
    @zzcflying ...类的命名有些糟糕... 拼音...
    zzcflying
        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>
    zzcflying
        52
    zzcflying  
       2012-08-10 14:23:32 +08:00
    @Hyperion 我不是专业写css的,我专业些js和python的。
    balibell
        53
    balibell  
    OP
       2012-08-10 18:37:26 +08:00
    @zzcflying 加上这个 -webkit-animation-iteration-count: infinite; 就完美了
    inmind
        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>
    kran
        55
    kran  
       2012-08-10 19:18:05 +08:00
    指的是不能查资料的情况下吗?
    balibell
        56
    balibell  
    OP
       2012-08-10 19:54:19 +08:00
    @kran 这些都是开放题,现在不流行闭卷考了。有兴趣直接投简历给 [email protected] 哈。
    zzcflying
        57
    zzcflying  
       2012-08-11 13:19:03 +08:00
    @balibell 嗯,是哦。
    balibell
        58
    balibell  
    OP
       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>
    <!-- for ie -->
    <span style="float:right; font-size:0; ">&nbsp;</span>
    </div>
    <div style="clear:both;font-size:0">&nbsp;</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>
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5610 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 39ms · UTC 03:12 · PVG 11:12 · LAX 19:12 · JFK 22:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.