第一组：杨昊 实用CSS
遮罩层：
.mask{
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
z-index: 998;
display: none;
}
弹窗请自定义。
渐变背景色：
从上到下：
.fromtop {
background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */
}
同样的，从左到右：
.fromleft {
background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
}
第二组：徐晋 Js贪吃蛇
在网上看到的一个用js写的贪吃蛇游戏，全部js代码只有二十行，感觉很6，贴上来大家可以复制下来运行玩一玩，不过主要是研究学习一下。
代码如下（可以复制下来自己玩一玩）：
<!doctype html>
<html>
<body>
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
<script>
var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
};
!function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
draw(dz, "Yellow");
} else
draw(sn.pop(), "Black");
setTimeout(arguments.callee, 130);
}();
</script>
</body>
</html>
运行效果如下：
可以自己调节速度，单位按ms计算：
其中：
一、<canvas>标签
H5标签，用于定义图形，比如图表和其他图像。例如如下代码可以绘制一个红色矩形：
1. .getContext(contextID)方法
参数： contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。（提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 "3d" 字符串参数。）
返回值：一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。
描述：返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。
2. .fillStyle属性
用于填充颜色
3. .fillRec(x,y,width,height)方法
用于绘制图形的位置及大小
二、js ~~运算符
一种利用符号进行的类型转换,转换成数字类型，例如：
~~true == 1
~~false == 0
~~"" == 0
~~[] == 0
~~undefined ==0
~~!undefined == 1
~~null == 0
~~!null == 1
三、js unshift()和pop()方法
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
pop() 方法用于删除并返回数组的最后一个元素。
四、arguments.callee
在函数内部，有两个特殊的对象：arguments 和 this。其中， arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，该属性是一个指针，指向拥有这个 arguments 对象的函数。 请看下面这个非常经典的阶乘函数：
定义阶乘函数一般都要用到递归算法；如上面的代码所示，在函数有名字，而且名字以后也不会变 的情况下，这样定义没有问题。但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为 了消除这种紧密耦合的现象，可以像下面这样使用：
不过，从ES5后就不推荐使用arguments.callee了
第三组：黄华英 Vue.js 条件与循环
一、条件渲染
利用v-if或者v-show进行条件判定
<section v-if="Status">
<section v-show="Status">
Status为true时会显示的section,以上两条语句效果相同
v-show和v-if之间的区别
在切换 v-if 块时，Vue有一个局部编译/卸载过程，因为 v-if 之中的模板也可能包括数据绑定或子组件。v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——在条件第一次变为真时才开始局部编译（编译会被缓存起来）。相比之下，v-show 简单得多（元素始终被编译并保留），只是简单地基于 CSS 切换。一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。
- v-else
例：随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app">
<div v-if="Math.random() > 0.5"> 大于</div>
<div v-else> 不大于 </div> </div>
<script> new Vue({ el: '#app' }) </script>
- v-else-if
用作 v-if 的 else-if 块，可以链式的多次使用
<div id="app">
<div v-if="type === 'A'"> A </div>
<div v-else-if="type === 'B'"> B </div>
<div v-else-if="type === 'C'"> C </div>
<div v-else> Not A/B/C </div>
</div>
二、列表渲染v-for
- v-for指令循环输出数组对象：
<ul id="app">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var app = new Vue({ el: '#app', data: { items: [//数组初始化 { message: 'Foo'
}, { message: 'Bar' } ] } });
输出结果：
- v-for 迭代对象
将对象的所有属性输出
<div id="app">
<ul>
<li v-for="value in object">
{{ value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: { //对象初始化
first: '111',
second: '222',
third: '333'
}
}
})
</script>
输出结果：
提供第二个的参数为键名： <li v-for="(value, key) in object">
第三个参数为索引：<li v-for="(value, key, index) in object">
也可以循环整数：<li v-for="n in 10">
第四组：王芳 bootstrap中的icheck.js插件
下载icheck：http://icheck.fronteed.com/
把icheck.min.js和skins文件夹都放到自己的项目文件中
在html页面中引入icheck.min.js文件
总共有6种皮肤，每种皮肤又有10种颜色，样式预览在http://icheck.fronteed.com/中，看好了就在html页面中引入对应的css文件
在页面中加上js，只需要写出修改了默认值的参数：
<script>
$(document).ready(function(){
$('.checkbox input').iCheck({
checkboxClass : 'icheckbox_square-aero',
});
})
</script>
附所有的参数及其默认值：
1. {
2. handle: '',
3. checkboxClass: 'icheckbox',
4. radioClass: 'iradio',
5. checkedClass: 'checked',
6. checkedCheckboxClass: '',
7. checkedRadioClass: '',
8. uncheckedClass: '',
9. uncheckedCheckboxClass: '',
10. uncheckedRadioClass: '',
11. disabledClass: 'disabled',
12. disabledCheckboxClass: '',
13. disabledRadioClass: '',
14. enabledClass: '',
15. enabledCheckboxClass: '',
16. enabledRadioClass: '',
17. hoverClass: 'hover',
18. focusClass: 'focus',
19. activeClass: 'active',
20. labelHover: true,
21. labelHoverClass: 'hover',
22. increaseArea: '',
23. cursor: false,
24. inheritClass: false,
25. inheritID: false,
26. insert: ''
27. }
手机端的记得把aria属性改成true哈
-
如果想修改icheck位置的话，可以在页面内用js修改，如：
image.png 修改大小比较麻烦，因为icheck的各种状态变化是通过改变背景图片的位置来实现的，所以需要修改对应css文件中所有的数值，包括width、height、position和size
有人说还需要修改图片大小，我试了一下发现我的不用
应该一般都是不用的，因为没有改几个像素
可能pc端涉及到hover的时候需要修改。
第五组：姜葳 js中的事件委托或是事件代理
什么叫事件委托呢？
它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。那这是什么意思呢？网上的各位大牛们讲事件委托基本上都用了同一个例子，就是取快递来解释这个现象，借花献佛，摘过来，大家认真领会一下事件委托到底是一个什么原理：
有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。现实当中，我们大都采用委托的方案（公司也不会容忍那么多员工站在门口就为了等快递）。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台MM也会在收到寄给新员工的快递后核实并代为签收。
这里其实还有2层意思的：
第一，现在委托前台的同事是可以代为签收的，即程序中的现有的dom节点是有事件的；
第二，新员工也是可以被前台MM代为签收的，即程序中新添加的dom节点也是有事件的。
为什么要用事件委托：
一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？
在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；
每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，是不是省了很多，自然性能就会更好。
事件委托的原理：
事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。
