做有态度的前端团队

网易FEG前端团队

  • flexbox布局实践2

    1、两端对齐垂直居中 这种布局常用于头部 header{ display:flex; justify-content:space-between; align-items:center; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>t......

    CSS

  • 屏幕尺寸、分辨率、倍率到底是什么鬼

    目前我们做移动端项目几乎不需要考虑为什么要这样写样式,为什么设计稿上100px我们直接写成1rem,移动端的屏幕尺寸那么多变,为什么能轻松兼容?那我们得从移动端的屏幕尺寸来探索一下其中的原理,首先就得了解这些费解的概念。 我在网上收集了很多资料,众说纷芸,我按自己的理解整理了这篇文章,如果有理解不当的地方,请指正。 屏幕尺寸 即我们通常说的尺寸是多少多少英寸啦,指的是屏幕对角线的长度。比如iphone6的屏幕尺寸是4.7英寸 设备像素DP(device-pixels) 很多地方又叫设备屏幕尺寸、设备物理像素、屏幕分辨率等等,我感觉是一个概念。比如iphone6是1334*7......

    CSS总结其他

  • canvas学习案例之简单的物理运动

    这次主要写2种简单的运动效果,包括匀速直线运动、匀加速直线运动。在码代码之前先了解下canvas动画效果的基本实现原理,其核心思想是先定义一个初始状态,然后定义一个定时器,定时器内执行一个方法,在这个方法中要清除当前的画面,然后重新绘制需要变化的效果。由于人眼存在残影,所以短时间内的中断的变化可以看成是连续的变化。 以下代码都是基于下面的html结构 <canvas id="canvas" width="728" height="400"> 你的浏览器不支持canvas,请跟换其他浏览器试一试 </c......

    JavaScript其他

  • 我写的代码真的规范吗

    前言 在需求的催赶下,终于完成开发,本地编译浏览,看一眼浏览器控制台,嗯!没有报错,开心的提交代码,发布到测试地址,QA测试通过,发布上线。心里暗喜,又完成一个需求单,完美手工! 相信很多人都有这样的经历,做项目经常都是需求赶着自己,加班加点的完成功能开发,盼望着浏览器控制台不要出现红色的报错,惊险的通过QA测试,最后期盼着能够按时完成成功上线。 很明显,自己在日常需求开发中,更多的是关注功能能否实现,效果能否实现,按时上线能否实现。这样的技术人生是不是太没追求了呢?作为一名开发,是不是还要考虑自己的代码是否足够规范,是否足够强壮,是否有性能隐患呢? 控制台没报错,功能正常并不......

    工具

  • CORS跨域资源共享

    前言:最近在后期优化梦幻西游手游图库项目的时候,遇到一个H5跨域请求接口的需求。 CORS-Orign Resource Sharing(CORS)既跨域资源共享,众所周知,浏览器有个同源策略,为了处理跨域请求,一般用JSONP,设置documet.domain降域,CORS等方式。 跨域资源共享协议标准通过声明一系列http标准头,让服务器能声明哪些来源可以通过浏览器范围服务器的资源。特别那些会对服务器数据造成影响的方法,标准要求浏览器要先以OPTION方法去发送一个预请求去获知服务器对跨源请求所支持的HTTP方法。以下就会分两种请求进行讨论。 1.简单请求 简单来说,就是一些请......

    其他

  • 关于小组页面脚本错误捕获

    平时本地或者测试环境开发,我们都能在调试面板之类的很直观看到脚本错误,出什么错,在哪,错误定位,一目了然,还能断点调试,这部分错误,一般会在开发以及QA测试阶段,就能大部分发现与修复。但是,如何捕获发现线上用户的错误呢?用户的网络、浏览器、电脑、手机等千奇百怪,总不能每次都远程用户电脑看一下它的Chrome吧? 一、如何捕获错误? 1、全局方式 window.onerror函数,可以捕获追踪全局的脚本错误,只要报错了,就会调用此函数,函数具体使用参数如下: window.onerror = function(msg,url,line,col,errorObj){ ......

    工具总结

  • Augmented Reality

    噔噔!一个类似阴阳师现世抽卡的小demo,由于getUserMedia的兼容性问题,目前只有安卓手机可以看到...(建议拿一些高端点的安卓机) 玩法:扫左图的二维码后,点击允许访问摄像头后,再扫右边的二维码(相当于阴阳师里的召唤阵) 或者你也可以拿另外一台手机扫下面的码来显示召唤阵 下面探索一下其实现的原理,其中主要的交互包括: 开启摄像头 > 扫码 > 显示模型 转换为相对应的技术,奏是... · getUserMedia,开启摄像头获取设备的媒体信息 · OpenCv,js-aruco, 图像处理,识别二维码 · 画出3d模型,threejs,three......

    JavaScript

  • createjs库easeljs模块,实现粒子浮动效果(有大小、旋转、透明度变化)

    最近有项目需要用到粒子浮动效果,套用组内已有的粒子浮动组件,效果明显达不到预期。so爬了下国外一页面,该页面的粒子浮动效果,使用了createjs库easeljs模块实现。以下(下文)整理了下来。 页面效果:http://f7.163.com/ (参考国外页面:http://asterisk-war.com/) html代码: <canvas id="hexaGround" height="907"></canvas> <script charset="utf-8" src="......

    总结

  • flexbox布局实践1

    1、子元素等分 这种布局常用于底部的导航或者tab等分 ul{ display:flex; } li{ flex:1; } 完整代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>test1</title> <style> ......

    CSS

  • 简单的canvas绘图demo

    最近在看canvas基础知识,刚学完绘制路径、矩形,设置线条、颜色、样式和阴影等,就想码下demo巩固下基础知识。于是网上搜了,找到了绘制XP壁纸的例子,里面用到了前面说到的各个知识点。好了,进入主题了。 html代码: <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">浏览器居然不支持Canvas?赶快换一个吧!!</canvas> js代码: window.onload = fu......

    JavaScript

  • 解决thinkjs开发jsonp接口返回Unicode时的问题

    前言 第一次使用thinkjs写后端,踩了不少坑,其中有一个坑想了很久,无奈网上关于thinkjs的教程还是偏少,问了不少人,耗时很久,所以在这里mark下。 问题 需求很简单,后端返回通过接口把数据返回给前端,因为考虑到跨域问题,接口选择采用jsonp形式。其实就是平台平时提供给我们的那些接口,想想自己也能写接口,还是很激动的!类似下面的接口: 然后前端通过ajax请求接口,搞定!thingjs的controller本身就提供各种数据格式返回的封装。 比如,你要返回json格式,直接在controller里使用 async byrefererAction(self){ ......

    其他

  • 写了一个Chrome扩展,方便查看NBA赛况

    前言 最近写了个Chrome扩展,在这里和大家分享一下。 我们小组日常工作用的检查工具就是一个Chrome扩展程序,可以看看这篇文章,里面有一些介绍:chrome工具优化的学习小结...当然我写的这个比较简单,没那么多复杂的功能。这个其实和我们平常写web页面差不多,所以我们前端可以写,于是我也来试试这个东西~ 先来看看效果图: 默认展示当天的赛况 还有相邻两天的赛况 目录结构 ├── css │ ├── index.css │ ├── boostrap.min.css ├── img │ ├── icon-128.png │ ├── icon-48.png ......

    工具

  • ECMAScript 2016 Language Specification (3)

    4.2.1对象 尽管Js包括对类的定义语法,Js对象并不是和C++,Smalltalk,或者java一样功能上功能上基于类。取而代之的是对象可以通过多种方式被创建,包括通过一个声明或者通过创造对象然后把初始值分配到对应的原型来执行初始化所有或者部分的构造体。每个构造体都是一个函数,该函数有一个叫做“protoytpe”的性质,被用来实现基于原型继承和原型共享。对象用构造体通过new创建成,比如 new Date(2009,11)创建了一个新的日期对象。不使用new调用构造体后的结果取决于构造体本身。比如,Date()善成一个表示当前日期和时间的字符串而不是一个对象。 每个通过构造体......

    其他

  • 快速搭建一个本地服务器

    我们都知道,有些情况本地直接点开HTML文件是不行的,需要在服务器环境才能正常访问。我们可以通过搭建本地服务器进行访问,比如我们用的fis本身内置了这个,这次介绍node的一个小模块http-server,可以快速地搭建一个本地服务器。 安装 npm install http-server -g 使用 使用非常简单,进入当前目录,输入http-server 即可,还可以加上其他的一些参数,比如http-server -p 3000 -o,-p指定端口,-o启动服务后自动打开浏览器,更多参数,请查看文档 小结 这个是我平时有些时候会使用到的一个小东西,非常便捷。比如做个小d......

    工具

  • 使用swiper组件,小注意项总结

    1、swiper切换,html代码不可见情况下,就执行swiper组件脚本,切换有bug。 swiper切换, html代码display:none;情况下,就已经执行了swiper组件脚本,当显示时,进行切换操作时有bug,bug表现为,鼠标拖动多少像素,swiper-wrapper的transform:translate3d(xxxpx, 0px, 0px)就移动多少像素。 常见为弹层情况 解决方法:swiper html代码显示后,再执行swiper组件脚本。 2、swiper组件 参数loop:true时,initialSlide指定的slide索引,与mySwi......

    其他