第一組：楊昊 實用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上，所以都會觸發，這就是事件委托，委托它們父級代為執行事件。
