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
web 前端 转盘界面的更多相关文章
- 对WEB前端的几段思考(一)——界面设计和性能优化(整理中)
尽管我并非艺术出生,既没有任何设计基础,又没有较高艺术涵养,也深谙在短时间内创造一定艺术造诣并非易事,但是既然当初选择从事网站前端开发,我的目光不能仅停留在前端代码上.作为一名志向在前端领域发展的人员 ...
- web前端的春天 or 噩梦
「 微信应用号可以做什么」 简单说,微信"小程序"可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个 HTML 5 应用.同时微信还开放 ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- 也许你需要点实用的-Web前端笔试题
之前发的一篇博客里没有附上答案,现在有空整理了下发出来,希望能帮助到正在找工作的你,还是那句话:技术只有自己真正理解了才是自己的东西,共勉. Web前端笔试题 Html+css 1.对WEB标准以及w ...
- 用grunt搭建web前端开发环境
1.前言 本文章旨在讲解grunt入门,以及讲解grunt最常用的几个插件的使用. 2.安装node.js Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs, ...
- Web前端工程师成长之路——知识汇总
一.何为Web前端工程师? 前端工程师,也叫Web前端开发工程师.他是随着web发展,细分出来的行业.Web前端开发工程师,主要职责是利用(X)HTML/CSS/JavaScript ...
- web前端开发学习内容
应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准 代码能 兼容主流浏览器.ie6.7.8.9 ff 等. ...
- Web前端框架与类库的思考
说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...
- Web 前端开发精华文章集锦(jQuery、HTML5、CSS3)【系列十七】
<Web 前端开发精华文章推荐>2013年第五期(总第十七期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
随机推荐
- Jquery重新学习之一[加载与属性html(),text(),val()]
一:Jquery加载方式: 1:首先页面加载时马上响应JS代码如下运行(不一定要等所有的JS和图片加载完毕,就可以执行方法): $(document).ready(function(){ }); 另一 ...
- js Object.is 相等判断
Object.is使用“Same-value equality”(同值相等)算法进行相等判断.它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致. Object.is('foo', ...
- form表单元素设置只读
form表单元素设置只读 CreateTime--2017年5月5日11:42:41 Author:Marydon 1.设置文本框只读 <!-- 方法一:简写 --> <inpu ...
- Java Socket网络编程Client端详解
此类实现客户端套接字(也可以就叫“套接字”).套接字是两台机器之间的通信端点. Socket client = new Socket(ip,port);//创建一个流套接字并将其连接到指定 IP 地址 ...
- Spatial Transformer Network
https://blog.csdn.net/yaoqi_isee/article/details/72784881 Abstract: 作者说明了CNN对于输入的数据缺乏空间变换不变形(lack of ...
- Ubuntu14.04单机版kubernetes安装指导
转:http://dockone.io/article/950 概述本文主要讲述如何在Ubuntu系统上安装kubernetes,网络上也有许多相关的文章,感觉都不是很清晰,这里我将自己的安装实践给大 ...
- atitit.为什么笔记本跟个手机不能组装而pc可以
atitit.为什么笔记本跟个手机不能组装而pc可以 1. 标准程度差 1 2. 为什么标准程度差 1 3. 第一个答案是「能」.第二个答案是「麻烦」. 2 4. 为什么手机不能自定义组装 3 1. ...
- 简明 Vim 练级攻略(转,有些动态图不能显示,请看转载处)
vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...
- initWithNibName和viewDidLoad执行顺序
转自:http://justsee.iteye.com/blog/1626231 众所周知,IB在加载nib的过程中存在着一些undocument行为,有的行为确实是不可理喻的,因此程序员对IB产生了 ...
- Spring学习11-Spring使用proxool连接池 管理数据源
Spring 一.Proxool连接池简介及其配置属性概述 Proxool是一种Java数据库连接池技术.是sourceforge下的一个开源项目,这个项目提供一个健壮.易用的连接池,最为关键的是 ...