zoukankan      html  css  js  c++  java
  • web 前端 转盘界面

    http://www.cnblogs.com/arfeizhang/p/turntable.html

    "如果有个做转盘的需求,你准备怎么做?设计师只会提供一个转盘的图片,其余都需要你完成,不能用框架和类库。"

    "这个转盘没有惯性的需求,只要求在手机上,用手指拖转盘,能让转盘跟随手指转起来即可。"

    这是我在面试前端开发人员时,经常会问到的一道题。转盘是类似上图的样子。

     

    博主之前在M公司和C公司的时候,经常用这题面试移动前端开发工程师。M公司的产品和设计是美国团队,在个别项目上UI设计比较大胆脱俗,对前端开发人员有较高的要求。C公司的只会JS的前端开发人员占比较大,产品经理有时提出的让人眼亮的需求,但从前端开发口中得到的答复往往是:“这个我们实现不了。”,产品经理只能作罢。

    于是我设计了这道题,希望能找到一些知识较全面,会综合应用的前端开发人员。在平时面试过程中,因为时间的关系,也不要求应聘人员将它用代码写出来,只和我聊下思路即可。在聊的过程中,我会就相关的一些技术细节深入问一下。

    通过这道题,可以探知应聘人员在移动端的开发经验,以及前端知识综合应用能力。

    这道题的需求很简单,但需要开发人员掌握较全面的前端知识。我们来看下这道题涉及到哪些知识点:

     CSS:

    • 背景图URL,位置和大小的写法(素材图片的尺寸可能不合适);
    • 容器圆角属性;
    • 旋转的实现;
    • 硬件加速是什么,什么条件下会开启硬件加速;
    • retina屏幕上为什么显示会模糊,如何避免?

    JS:

    • 触摸事件;
    • 触摸事件和鼠标事件的不同处有哪些;
    • 触摸坐标获取;
    • 如果要两指一起拖动,圆盘才能旋转,代码需要做什么改变?
    • 为什么在移动设备最好用touch事件,而不用mouse事件?
    • 原生JS如何取DOM的内嵌CSS属性,如何获取外部样式表文件定义的属性?

    Html: 

    • viewport 的参数和作用

    数学:

    • 角度和弧度的换算
    • 向量计算
    • 三角函数

     

    面试题大多如此,需求看起来简单,但涉及到的知识却不简单。大家如果有兴趣的话,可以拿这道题练下手(大家可以先只用考虑webkit内核)。我觉得,对于常规前端开发人员,会有较大提升吧。

     

    PS.我做了一个,现在先不发布出来,过两天放出来大家参考一下。 :P 

  • 相关阅读:
    Study Plan The TwentySecond Day
    Study Plan The Nineteenth Day
    Study Plan The TwentySeventh Day
    Study Plan The Twentieth Day
    Study Plan The TwentyFirst Day
    python实现进程的三种方式及其区别
    yum makecache
    JSONPath 表达式的使用
    oracle执行cmd的实现方法
    php daodb插入、更新与删除数据
  • 原文地址:https://www.cnblogs.com/pengkunfan/p/3790190.html
Copyright © 2011-2022 走看看