做有态度的前端团队

网易FEG前端团队

2016年8月

  • 初探sessionStorage的使用

    本文主要讲述使用sessionStorage缓存接口数据 实例请戳这 点我 关于sessionStorage sessionStorage是针对一个session进行数据存储。当用户关闭浏览器窗口后,数据会被删除,刷新页面数据也还是存在。使用sessionStorage可以避免频繁调取数据接口,把数据储存到客户端。 sessionStorage的常用方法 window.sessionStorage.name = 'zuiniu'; // 赋值 window.sessionStorage.setItem('name','zuiniu'); /......

    其他

  • 从建站到发布网站

    如何编辑网站我就不说了,大家都会的,我主要是讲下如何将网站发布到线上这一系列的步骤(PS:数据库什么的都不考虑,上传最简单的静态页面,其他的留给大家探索)。 第一步:申请空间 我为了给大家演示,我就找了一个免费的空间--主机屋(PS:申请怎样空间看个人需求,平常练练玩玩就申请一个免费的就好,免费的有一个不好的缺点,就是每个月要来网站申请延期,这个比较麻烦的。),其他的知道过程就能举一反三了,进入主机屋:http://www.zhujiwu.com/ 下拉就能看下图信息,按箭头指的方向点击,我就选择了第一个演示,如下图。 点击查看详情看到的页面,点击立即开通,如下图。 之后点击初......

    其他

  • 最快的Web开发IDE——HBuilder

    HBuilder是DCloud推出的一款支持HTML5的Web开发IDE。快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块等,大幅提升HTML、js、css的开发效率。同时,它还包括最全面的语法库和浏览器兼容性数据。 从Frontpage、Dreamweaver、UE,到Sublime Text和JetBrains的WebStorm,Web编程的IDE已经更换了几批。HBuilder是DCloud(数字天堂)推出一款支持HTML5的Web开发IDE。“快,是HBuilder的最大优势,通过完整的语法提示和代码输入法、代码块及很多配套,HBuilder能大幅提......

    工具

  • css3滤镜总结

    css3有一些滤镜挺有意思的,也很简单,遂学习一下,但一般会用得比较少,我们都直接切图了。 这些滤镜主要都是都图片效果的处理,样式属性值中一般使用一个数值或数值百分比作为参数。我们用两张照片做对比看滤镜的效果。 1、grayscale(灰度滤镜) 彩色图像转为灰度图像 <img src="1.jpg"> <img src="1.jpg" class="grayscale"> .grayscale{ filter:grayscale(100%); -webkit-filter......

    其他

  • 一个简单的卡片效果

    具体效果点这里:http://xyq.test.nie.163.com/test/pics/index.html 一个简单的卡片切换效果,主要有以下功能 有4个切换的方向 动态加载数据 CSS3控制动画效果 动画的考虑 一开始是打算通过js动态地计算每个卡片的切换坐标以及动画移动的距离,无奈其计算量的复杂和繁琐,最终放弃了这一方案。 细细观察,你会发现其实每个卡片的位移以及切换出去的效果是一样的,所以完全可以固定写好每个卡片的初始样式,然后再通过js去动态地改变样式名。 所以,很愉快地就这样开始了样式的编写。 //通用 .poker-item { ......

    其他

  • chrome工具优化的学习小结

    前言 这个月一直不知道写什么,说明没认真学习啊~但是之前花了不少时间去维护chrome检查工具,没点总结,总感觉很浪费那段时间。这里把过程中遇到的问题做个小结吧。 先交代下chrome检查工具的背景:是一个内部使用,用来检测页面信息的chrome插件工具,检测的功能包括:页面的基本信息(比如一些seo信息、meta标签、加载时间)、检测某些特殊代码进行分析,检测图片的大小、检测页面发起的某些请求进行分析等等。通过插件工具来达到快速检测页面的某些规范信息,方便前端、编辑和qa直观快速的校验页面的一些信息。工具截图如下: chrome插件相关 因为本人只是负责对已有的插件进行优化升级......

    其他

  • JS面向对象相关知识的一些学习笔记

    最近在看《Javascript高级程序设计》第6章面向对象的程序设计,结合自己的一些理解,以此文做个笔记吧,可能会写得比较零散。 1、理解prototype 我们创建的每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个对象,而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。如果按照字面意思来理解,那么prototype就是通过调用构造函数而创建的那个对象实例的原型对象。前面抄了《Javascrpt高级程序设计》里的一段话,概念我就不说太多了,说了可能也不太严谨,我喜欢通过写一些例子去慢慢理解它。下面举这个例子看看这个prototype......

    JavaScript

  • 重温css的选择器

    本文主要和大家重温一下css选择器中的一些常用符号的使用,例如“+、~、^、$、>、*”等的使用! css选择器之特殊符号 1、>(大于号) 大于号代表选择子元素,这个我们经常用,值得注意的是 div>span 和div span 的区别 这2个都是选择子元素,但是 div>span 只选择某个元素的子元素。例如如下: <div>This is <span class="aa">very</span > <span>very</span> important.</div&......

    其他

  • 深入了解DOM对象

    DOM是文档对象模型(Document Object Model)是基于浏览器编程的一套API接口,W3C出台的标准,每个浏览器都有一些细微的差别,其中以Mozilla的浏览器与标准最接近。 通过 DOM,您可访问 HTML 文档中的每个节点。 查找元素 1、直接查找 getElementById(id) //获取有指定惟一ID属性值文档中的元素 getElementsByTagName(name) //获取带有指定标签名的对象的集合 getElementsByClassName //获取所有指定类名的元素 getA......

    JavaScript,其他

  • ES6实战——字符串

    在 ES6 中,标准库升级了很多,在这些变化中有许多新的对于字符串的函数,比如 .includes() 和 .repeat()。 .includes( ) var string = 'food'; var substring = 'foo'; console.log(string.indexOf(substring) > -1); // true 之前我们使用 indexOf() 函数的返回值是否 >-1 来判断字符串是否包含某些字符串,现在我们更简单地使用 .includes() 来返回一个布尔值来判断: const string = 'food'; const ......

    JavaScript

  • HTML5的history API和浏览器历史记录管理

    之前的天下手游移动官网还有一个功能就是左右切换页面内容时 功能介绍 history的HTML5 API可以更改当前页面的url但是不刷新页面,同时将路径记录到历史页面中,可通过浏览器后退按钮来返回到上一状态。这样可以轻松帮我们实现在ajax动态局部刷新页面后,通过后退按钮来回来前一状态,而保证页面不跳转。 API 1、存储当前历史记录点 window.history.pushState(stateObj, title, url) 三个参数: stateObj——一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null......

    其他

  • #ThreeJS学习笔记( 二)——导入外部模型

    外部模型格式 Threejs支持了许多格式的3D模型导入,包括*.obj、 *.sea、*.3mf 、*.amf、*.sea、*.pmd、*.json等。 这里主要讲解一下obj模型的导入,及将obj文件转成文件更小的json格式导入。 导入obj模型 3Dmax格式转换成obj格式 美术提供的一般为3Dmax项目文件夹,里面包含了.max文件以及贴图图片等资源,用3DMAX打开.max文件可以看到3D模型 如图: 点击菜单里的导出,选择obj格式,点击保存后出现选项 导出比例:几何体选项里的输出比例,默认是1.0,我们根据模型的分辨率,以及需要在网页上呈现的分辨率设置一......

    JavaScript