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