83個(gè)js原生代碼實(shí)例，從易到難，涵蓋js算法和幾乎開發(fā)中用到的知識(shí)點(diǎn)（實(shí)時(shí)更新中）
實(shí)例中也包括了很多布局例如：flex布局和gird布局。
github地址?github.com/laihuamin/jsExample
項(xiàng)目展示地址laihuamin.github.io/jsExample/
（親自做，對(duì)js的熟練度絕對(duì)的加深，有心的給個(gè)star，謝謝。）
第一課
第一個(gè) ?控制DIV屬性
說一下代碼實(shí)現(xiàn)邏輯
用的是點(diǎn)擊事件來實(shí)現(xiàn)的。
循環(huán)邏輯，五個(gè)按鈕五個(gè)點(diǎn)擊事件具有很多的相似之處，這樣可以減少代碼量。
判斷邏輯，因?yàn)橹刂冒粹o需要清空之前的style，這里用if語句也可以，但是比較繁瑣，所以我采用了與門操作符，好處就是代碼量比較少。
第二個(gè) 網(wǎng)頁換膚
首先先來說幾個(gè)注意點(diǎn)，再來說代碼邏輯
1、筆者用的是button，遵循JS語義化原則，使人更容易理解。但是得先設(shè)置box-sizing:content-box問題，不然按鈕的寬高無法正常顯示
2、筆者這里用了flex布局，簡單方便。推薦這篇文章
http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
代碼邏輯
通過點(diǎn)擊事件來實(shí)現(xiàn)，實(shí)現(xiàn)過程主要由一下兩點(diǎn)
1、改變引入的css文件
2、改變按鈕的class，添加一個(gè)active樣式。（注：active筆者設(shè)置了import屬性）
第三個(gè) 函數(shù)接收參數(shù)并彈出
代碼邏輯
采用點(diǎn)擊事件，獲取值后將其傳個(gè)函數(shù)
第四個(gè) 用循環(huán)將三個(gè)Div變成紅色
亮點(diǎn)
使用flex布局。
代碼邏輯
運(yùn)用點(diǎn)擊事件，當(dāng)點(diǎn)擊之后，利用循環(huán)改變背景顏色
第五個(gè) 鼠標(biāo)移入改變樣式，鼠標(biāo)移出恢復(fù)
代碼邏輯
用鼠標(biāo)經(jīng)過事件和鼠標(biāo)移出事件。當(dāng)鼠標(biāo)移入是，改變div的style，移出是將style置為空。
第六個(gè) 記住密碼提示框
代碼邏輯
鼠標(biāo)經(jīng)過顯示內(nèi)容，鼠標(biāo)移出內(nèi)容隱藏
第二課
第一個(gè) 百度輸入法
代碼邏輯
點(diǎn)擊事件控制導(dǎo)航欄的下拉，但是需要加一個(gè)if的判斷，判斷ul塊的display屬性。
第二個(gè) 點(diǎn)擊Div，顯示其innerHTML
代碼邏輯
利用點(diǎn)擊事件彈框p元素的innerHTML內(nèi)容。這個(gè)實(shí)例，主要幫助理解innerHTML。
第三個(gè) ?求出數(shù)組中所有數(shù)字的和
代碼邏輯
利用點(diǎn)擊事件，然后取得input的value值。
取得的是字符串類型，用split把字符串切成一個(gè)一個(gè)字符串。
在用Number逐個(gè)進(jìn)行轉(zhuǎn)換，最后累加起來取得和，在輸出給另一個(gè)div塊
第四個(gè)? 彈出層效果
代碼邏輯
利用點(diǎn)擊事件，控制兩個(gè)div塊的display。
第五個(gè)? 函數(shù)傳參，改變Div任意屬性的值
代碼邏輯
利用點(diǎn)擊事件將參數(shù)傳遞給change函數(shù)，改變屬性值。
在利用點(diǎn)擊事件，將style中的css清除掉。
第六個(gè) ?圖片列表：鼠標(biāo)移入/移出改變圖片透明度
布局
采用flex布局，（筆者越來越喜歡這個(gè)布局，感覺沒有float那么繁瑣，用起來十分方便）
代碼邏輯
采用鼠標(biāo)經(jīng)過事件和鼠標(biāo)移出事件改變其style屬性。
第七個(gè)? 簡易選項(xiàng)卡
代碼邏輯
利用鼠標(biāo)經(jīng)過事件改變內(nèi)容塊的display屬性，以及本身的背景色。
注意兩個(gè)點(diǎn)：
1、改變內(nèi)容塊時(shí)，筆者用了索引，因?yàn)閕的不能被引用。
2、在賦值之前，要將所以style重置之后在進(jìn)行。
第八個(gè)? 簡易JS年歷
布局還是采用flex布局
代碼邏輯
利用循環(huán)和鼠標(biāo)經(jīng)過事件改變內(nèi)容塊里面的內(nèi)容。
第九個(gè)? 單一按鈕顯示/隱藏一播放列表收縮展開
代碼邏輯
利用點(diǎn)擊事件，設(shè)定一個(gè)判斷標(biāo)準(zhǔn)，比如筆者用了show，這個(gè)vue里面也有類似用到。
第十個(gè)? 提示框效果
布局
采用flex布局
代碼邏輯
利用的是循環(huán)和鼠標(biāo)經(jīng)過事件，以及鼠標(biāo)移出事件，來改變圖片的display屬性。
第十一個(gè)? 鼠標(biāo)移過，修改圖片路徑
布局
采用grid布局，第一次用，覺得挺不錯(cuò)的 blog.csdn.net/hj7jay/article/details/70670467
推薦這個(gè)教程，挺完善的
代碼邏輯
采用鼠標(biāo)經(jīng)過事件，切換圖片的src屬性，筆者用到了正則，減少代碼量。
筆者還加了圖片的懶加載判斷，用的是一張gif的動(dòng)圖
第十二個(gè)? 復(fù)選框（checkbox）全選/全不選/返選
代碼邏輯
for循環(huán)判斷每一個(gè)復(fù)選項(xiàng)框是不是被選中。
當(dāng)不被選中時(shí)，checked為false，在js的與操作符中當(dāng)前一項(xiàng)為false時(shí)，后一項(xiàng)不被執(zhí)行。
當(dāng)循環(huán)執(zhí)行完，判斷被選中的數(shù)量是不是等于復(fù)選項(xiàng)框的數(shù)量。
當(dāng)數(shù)量相等時(shí)，把全選按鈕的check的值賦為true。
當(dāng)全選項(xiàng)框?yàn)閠rue時(shí)，innerHTML的值為“全不選”，反之，則為“全選”。
接下去就是全選和全不選，以及反選的邏輯。都是利用循環(huán)，邏輯比較簡單，不加以贅述。
第三課
第一個(gè)? 用typeof查看數(shù)據(jù)類型
代碼邏輯，用typoof判斷數(shù)據(jù)類型。
第二個(gè)? 用parseInt解析數(shù)字，并求和
代碼邏輯
利用點(diǎn)擊事件，累加兩個(gè)input的值（經(jīng)過parseInt（）轉(zhuǎn)換）。再講值賦給res
在添加兩個(gè)句柄，判斷input的值為空時(shí)，將res切換回？。
第三個(gè)? 累加按鈕，自加1
代碼邏輯
點(diǎn)擊事件，使得n的數(shù)值自動(dòng)累加，然后賦值給button。
第四個(gè)? 輸入兩個(gè)數(shù)字，比較大小
代碼邏輯
利用點(diǎn)擊事件，判別兩個(gè)值的大小，然后用正則選取內(nèi)容，改變button的innerHTML的屬性值。
第五個(gè)? 頁面加載后累加，自加1
代碼邏輯
利用setInterval設(shè)置定時(shí)觸發(fā)函數(shù)，然后給innerHTML的內(nèi)容賦值。
第六個(gè)? 判斷數(shù)字是否為幾位數(shù)
代碼邏輯
先對(duì)input輸入框采用松開按鍵事件，判斷輸入為什么，把所有除數(shù)字以外的置為空。
然后在判斷input的value值的長度，來判斷是幾位數(shù)。
第七個(gè) ?簡易計(jì)算器
第八個(gè) ?簡易時(shí)鐘
代碼邏輯
先定義一個(gè)函數(shù)，用來獲取幾點(diǎn)幾分幾秒，然后在用setTnterval定時(shí)器來事實(shí)更新dom
正則的作用是當(dāng)時(shí)間是各位數(shù)的時(shí)候在他前面加個(gè)0，使其變成兩位數(shù)。
第九個(gè)? 簡易倒計(jì)時(shí)時(shí)鐘
代碼邏輯
定義一個(gè)函數(shù)，將時(shí)間換算成分秒形式，然后在讓值遞減，使其完成計(jì)時(shí)功能。
