0
广外隧道口Web后台（1）
最近在学Node的知识，学没一个星期又有一个项目要做了。哇新的Cmd Markdown更新了苹果的字体看起来好舒服。关键字： 全屏背景 字体图标 data-* 颜色插件 kindeditor项目页面：Submit Activity 全屏背景设计图用了个全屏背景：正常屏幕（1366768)1080P宽屏 (19801080)是的我买了个显示器！好爽！
归档: 2015
0
Quanta杯总结-2
JS交互（后台）这次作品和后台交互还是蛮多的，自己已经不只是再单纯的重构写页面了，这次也花了很多时间在这里导致没有太多时间打重构的代码=。=主要涉及这几个：表单验证，表单提交，Ajax，数据传递。 整体结构参考的博文找不到了。。1234567891011121314151617181920212223242526272829var loginBar = { init: function () { _this = loginBar; _this.config = { $loginBtn: $('#login-btn'), $regisBtn: $('#regis-btn'), $loginOly: $('#login-overlay'), $regisOly: $('#regis-overlay') }; _this.setup(); }, setup: function () { _this.bindEvent(_this.config.$loginBtn, _this.config.$loginOly); _this.bindEvent(_this.config.$regisBtn, _this.config.$regisOly); }, //事件绑定，外部也可以单独调用 bindEvent: function (clickObj, targetObj) { clickObj.click(function () { targetObj.fadeIn(500).click(function (event) { if (event.target == $(this).context) { $(this).fadeOut(500); }; }) }) }}
0
Meteor学习笔记-1
扯淡弄完Quanta杯总得自己找点东西来学呀~去肖老板办公室见了中大的两个做外包的师兄，有个师兄也会前端，看到他用了Meteor,那我自己也来搞一下咯~Hexo的模板渲染遇到Meteor的模板代码会渲染出错！！所以有些代码就不放上去了。 安装 METEOR 还是想直接在Win下搞，选择好安装包后安装，记得要翻墙（也可能是校园网屏蔽了某些网站） 框架是直接安装在C盘下的C:\Users\Administrator\AppData\Local\.meteor。把meteor.bat添加到系统变量，然后就可以在任意位置使用命令创建新的应用了：meteor create simple-todos。后来发现用WebStorm打开也可以直接创建Meteor应用，真不愧是前端神器啊，而且还有其他前端应用比如Bootstrap，PhoneGap等等。 指导文档：Installing Meteor
0
Quanta杯总结-1
简要地说一下这次的作品吧：时间大概是20天。项目的idea是运营部的人想的，设计师和冬令营的设计师一样，这次我就专注做重构（其实后来写了好多前台和后台的交互），后台找了舍友。我和舍友都是大二才参加Quanta，所以要和大一的一起做作品比赛。具体项目的功能是在线同步聊天看视频。运营说是参考这个网站：letsgaze（可能需要翻墙，而且必须要用Chrome浏览器）。简单的说就是两个人一起看视频，我暂停，你也暂停，我播放，你也播放，看的内容是同步的。同时也可以聊天。上面这个就是主页了。接下来写点东西记录一下做的时候遇到的坑吧。静态页面：Together。其他的页面在根目录下可以找到。
0
益米主页总结(3)
第一次用上图片有点小激动。。五一小长假又是在学校。现在都是一个学期才回一次家了。 JS-main其实重新去看自己写的JS，有好多地方可以改。更悲催的是，发现JS基本都是用来实现动画效果的=。=1234567var commonAnimatefun = function(id, prevCls, addCls) { var ele = document.getElementById(id); if (ele.className.indexOf(prevCls) > -1) { return; }; ele.className += addCls;} 实现第一部分写的滚动触发JS然后给父元素添加动画类就是这个函数了。之前写的重复的太多，就封装成这个函数，当符合条件就触发。当然，为了避免多次添加类，函数内做一点判断。不过我更想是执行了一遍这个函数就取消执行，不要进入函数判断。写这篇东西的时候自己看着JS好不爽，边写边重新重构代码了：
0
益米主页总结(2)
你们知道弄了一整天才把博客重新弄好是什么心情吗。。给笔记本换了固态硬盘格了C盘D盘什么软件都要重装。折腾了好久才知道原来HEXO升级为3.0了。之前2.7用的好好的现在弄了好久真的是心好累啊心好累啊。不过算是弄好了，自己把public文件夹手动deploy【再见】。好了记一下主页里用到的JS吧。最终页面：益米，让校园生活轻松自在 JS-base不知道为什么我自己就是不喜欢用jQuery。就是喜欢自己写长长的JS代码。所以把自己之前写过的函数都收集起来真的是太有必要了： 判断是否在数组内12345678function is_inArray (array,target) { for (var i = 0; i < array.length; i++) { if (array[i] == target) { return i; } } return -1;} 其实我觉得写得还好。。不过来看看zepto.js的：123$.inArray = function(elem, array, i){ return emptyArray.indexOf.call(array, elem, i)}
0
益米主页总结(1)
在做益米的主页时，又学到了很多新知识：CSS3动画，SEO，JS事件处理等等。设计师很给力，我也在努力重构出他想要的效果。最终页面：益米，让校园生活轻松自在 开始设计师是做好一个模块就丢给我。所以我刚开始也是一个模块一个模块的重构。做完5个模块后总设计图就发给我了。然后就是直接把HTML和LESS拼接在一起。大概的样子就出来了。不过第一次这么做也出现了一些问题，记录一下： 模块命名最好在项目开始的时候就定义好各种基本模块的名字，比如：1<div class="module-container"></div> 然后确定好容器的宽度，以及在总页面中是怎么呈现。后来定义的是这样：1.module-container {width: 1110px;margin: 0 auto;} 实际中这个并不是最外层的容器。需要另外一个div来包裹，设置宽度啊背景啊什么的：1.w100p {width: 100%;min-width: 1200px;background-color: #EDF4F9;} 然后秉承着padding和宽度分离的原则，在w100p类之下再设置一个内边距，来控制内容在一整个区块中的上下距离：1.p100 {padding: 100px 0;} 其实我没有量设计图的距离…就让内容看起来是居中的。不过让内容垂直居中其实有很多办法，以后再讲。 CSS3 动画动画都单独放在一个CSS里面。
0
微信浏览器跳转相关
在做益米的下载页的时候发现微信浏览器有些地方需要注意。 链接跳转跳转苹果App Store：第一次是设置链接为https://appsto.re/cn/z3aa6.i发现在微信里这个链接不能跳转，查了资料后发现有一种方法：微信中打开app store连接。意思就是微信会内部把链接重定向，判断是App Store就阻止掉。所以在页面里面改写链接，改成在他们域名下，再使用JS进行跳转。具体方法是前面加上http://mp.weixin.qq.com/mp/再重定向：redirect?url=后面再把原来的链接里的冒号改成%3A，斜杠改为%2F。所以链接变成了：http://mp.weixin.qq.com/mp/redirect?url=http%3A%2F%2Fappsto.re%2Fcn%2Fz3aa6.i 尝试之后发现这个方法已经失效了。 无奈之下使用引导用户使用safari打开： 引导跳转制作遮罩层：12345<div id="popweixin"> <div class="tip"> <img src="images/weixinpopup.png" alt=""> </div></div> 123456789101112131415161718192021222324#popweixin{ width: 100%; height: 100%; overflow: hidden; position: fixed; z-index: 1000; background: rgba(0,0,0,0.5); top: 0; left: 0; display: none;}#popweixin .tip { width: 100%; background: #FFF; z-index: 1001;}#popweixin img { width: 100%;}
0
JavaScipt事件(2)
跨浏览器的事件处理程序1234567891011121314151617181920var EventUtil = { addHandler: function (element, type, handler) { if (element.addEventListener) { element.addEventListener(type, handler, false); } else if (element.attachEvent) { element.attachEvent("on" + type, handler); } else { element["on" + type] = handler; } }, removeHandler: function (element, type, handler) { if (element.removeEventListener) { element.removeEventListener(type, handler, false); } else if (element.detachEvent) { element.detachEvent("on" + type, handler); } else { element["on" + type] = null; } },} 顺序 DOM2级方法：false表示在冒泡阶段调用 IE8下的方法执行顺序 DOM0级最不提倡的方法（现代浏览器不执行）
0
JavaScript事件(1)
本来以为页面做的差不多了。后来发现移动端和PC端一样有好多坑要填=。=干了几天感觉恶补了JS什么的。这次主要总结一下JS中的事件。 事件流事件流描述的是从页面中接受事件的顺序。 事件冒泡IE的事件流，事件开始时由最具体的元素接收，逐级向上传播到较为不具体的结点。还是很好理解的。。比如：1234567<!DCTYPE html><html><head></head><body> <div>ddd</div></body></html> 单击<div>元素，Click事件就会从<div>到<body>到<html>到document。就像冒泡一样。所有浏览器都支持，IE5.5之前会跳过<html>。现代浏览器冒泡到window对象。 事件捕获顺序和冒泡相反，由Netscape Communicator团队提出，现代浏览器也支持这种事件流模型。”DOM2级事件”规范要求事件从document对象开始传播，但是现代浏览器从window对象开始。 DOM事件流包括三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。事件捕获阶段为截获事件提供了机会；然后是实际的目标接收到事件；最后的冒泡阶段可以在这个阶段对事件做出相应。就像先事件捕获（不包括目标div）然后在处于目标阶段，事件在div上发生，然后开始冒泡。规范要求捕获阶段不会涉及事件目标，但是现代浏览器会在捕获阶段触发事件对象上的事件。因此有两个机会在目标对象上操作事件。兼容性：IE8及之前不支持。