xiaojiecong 2017-02-07

54

181090

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

工具

gzxiejianan 2017-01-10

61

175245

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

其他

xiaojiecong 2016-12-31

60

203069

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

工具

凤玲 2016-12-30

61

174172

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......

其他

Eason 2016-12-29

58

176098

先对比上面两张图，显而易见，第一张图 预约按钮上面的输入框不见了，但是在其他浏览器都正常显示。到底它在UC浏览器都经历了些什么，找来测试机子本地调试，但本地调试显示正常，这就尴尬了，给找出问题所在增加了阻碍。 嗯，那为什么我说在uc浏览器某元素消失了而不是说输入框消失了，可见uc玩消失的不是针对输入框，而是被某些属性或什么影响到了。 先看看在uc其他输入框能正常的页面，对比一下，少了value属性，type属性也不一样，那改成一样试试，结果不尽人意，接着就剩class类名不一样了，万万没想到真的是用名不慎。还是组长机智！ 怎么回事呢？这里是一个输入电话号码的输入框，类名便简单为p......

其他

军 2016-12-27

158

202248

20170116更新 目前最新版本是v1.0.6，新增了cms新闻系统的常用代码块。可以敲fegcms开头，就会快速找到cms相关代码片段。 cms html代码片段 fegcms-keywordInfos：新闻内页关键字列表 fegcms-kindTraceInfos：新闻内页面包线 fegcms-list：新闻列表 fegcms-news：新闻详情 fegcms-pages：新闻分页 fegcms-reNewsInfos：新闻内页相关新闻 fegcms-resourceInfos：新闻内页图片或者视频列表 fegcms-list-old：新闻列表（旧版） fegcms-news......

工具

xia 2016-12-05

63

168283

制作页面经常遇到编辑丢一份表格或者word文档过来，这时就需要我们整理数据，为了方便后续的修改，整理成以下数据： var arr = { 'my': { 'name':'【回合】', 'example':'我的回合，我的回合，时间是一条不能倒流的河。', 'from':'《梦幻西游》手游' }, 'dtws':{ 'name':'【PK】', 'example':'物资pk:为团而生，为团而死。, 'from':'《大唐无双零》' }, 'dty......

其他

gzheyunying 2016-12-03

56

174879

5. 找到数组中的最大最小值 内部函数Math.max() 和 Math.min() 可以从参数中找到最大值和最小值： Math.max(1, 2, 3, 4); // 4 Math.min(1, 2, 3, 4); // 1 如果要在数组中找最大最小值可以这样用： var numbers = [1, 2, 3, 4]; Math.max.apply(null, numbers) // 4 Math.min.apply(null, numbers) // 1 透过 ES6 的展开运算符来完成： var numbers = [1, 2, 3, 4]; Math.max(...nu......

JavaScript

两只凤梨 2016-12-01

71

199791

在做大话西游经典版新闻内页，有个功能是滚动条下拉到一定位置，自动加载下一篇新闻，由于编码问题，采用了不同的加载下一篇新闻的方式。 页面效果：http://xy2.163.com/news/news/20161129/15205_658163.html 关于编码引起的问题 页面最终显示的编码是有一下四个因素共同决定的： 1）HTTP Header中的"Content-Type"项，服务器端返回编码设置 2）html代码中的meta标签 3）页面文件的保存编码 4）请求服务器设置的编码 HTTP Header中的"Content-Type"......

总结其他

floyd 2016-11-29

55

212430

ES7都来了，然而我们连ES6都很少用到，基于ES6的不成熟，以及浏览器支持程度问题，导致大家都比较少使用得上它。不过目前日渐更新的浏览器，已经大面积支持ES6的新特性了，即使不支持，也可以使用Babel来进行转换为ES5来执行。此次就运用到Babel来编译，已集成到前端发布工具中，添加即可使用。 1、类定义 以前的做法： function ImageFall(param){ } ImageFall.prototype = {} 怎么看，都不像一个类，怪别扭 class ImageFall{ //构造函数 con......

JavaScript总结

吱吱桑 2016-11-29

57

172428

首先，看下demo效果，扫一下下面的二维码： 主要利用浏览器的deviceorientation事件监视设备朝向，记录下其受地心引力作用下而在方向上产生变化的数据，然后使用DeviceOrientationControls.js（一个three.js的插件）让摄像头根据设备的移动进行调整，相当于模拟人看向物体的某个方向，犹如人的视线一样。最后，结合three.js来构建一个3d世界。 1. 画一个会动的太阳 引用three.js, 建立3个要素：场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中，然后再画一个太阳。 ......

JavaScript

瑶一瑶 2016-11-28

74

174617

用requestAnimationFrame来代替setInterval 在高级浏览器中，我们用requestAnimationFrame这个方法来代替setInterval和setTimout来做定时器。 requestAnimationFrame的执行机制 目前的显示器大部分的PSF都是60帧/秒，即每1000/60 = 16.7ms刷新一次，如果setTimeout/setInterval设置的时间间隔小于16.7，那么就会出现过度绘制的问题。而requestAnimationFrame正是为了这个而出现的，它会跟着浏览器的绘制走，浏览器每次重绘会通知requestAnim......

JavaScript

xiaojiecong 2016-11-28

59

165651

通常我们定义函数会用下面两种写法： 1、函数声明 function test(){ //... } 2、函数表达式 var test = function(){ //... }; 表面上看没什么区别，实际上解析器会在执行任何代码前先读取声明，而函数表达式要等到解析器执行到它所在的代码行才会真正被执行。下面举个例子： var test = function() { console.log(2) }; function test() { //这个是函数声明，将会被提升 console.log(1); } test() 结果是输出2，这个代码片段会被......

JavaScript

xia 2016-11-28

72

172579

1、最近做阴阳师日本官网，其中有个功能是获取预约人数，设计稿上的人数是这样151,567,000，想了想自己写还有点麻烦，于是网上copy了代码，再修改了下。 其中，有一点需要注意的是：函数中的str是字符串，所以需要把数字进行转成字符串，再传值。 function formatNum(str) { var newStr = "", count = 0; if (str.indexOf(".") == -1) { for (var i = str.length - 1; i >= 0; ......

总结

军 2016-11-14

231

307637

前言 粘性交互 指的是某个模块在页面滚动到指定位置时脱离页面不再顺页面滚动而滚动，而是处于屏幕某一固定位置，变成fixed状态，粘着屏幕某一边缘。这种交互经常用到一些导航，比如《大话西游》手游移动官网，效果请看下面动图示意： 这种交互的主要逻辑是：导航模块默认是普通流体布局，然后监听window的scroll事件，当页面滚动到导航模块的位置时把导航改成position:fixed状态并调整模块的显示位置即可。在大部分浏览器没什么问题，但是微信对scroll这高频事件做了处理，即使你绑定了scroll事件，在滑动屏幕时也要等页面滚动完后才会执行。所以在微信下这种粘性交互是不流畅的：......

JavaScriptCSS