序
接觸簡書也有一段日子了，這中間的時光還是比較輕松加愉快的，那種可以和他人分享知識的欣喜和愉悅的確是非常棒。我一向都是覺得專心寫自己的文就可以了，不會總是糾結有多少人在看，有多少點擊等等。用心寫好自己的文，體會那種分享的快樂，就可以了。
之前寫的《js常用方法和一些封裝》系列暫且告一段落，接下來，我會通過各種案例，來分享javascript的各種技巧，所以最終將這個系列的名稱定為：《從案例中學習JavaScript》,回想到自己初學編程時候的各種艱辛，買了很多書，然而這些書大多為泛泛而談，或者東拼西湊。市面上充斥著各種多少多少天從入門到精通的書籍，我曾經也花了好多大洋，滿懷信心地買了類似的書，結果我就零基礎從入門到蒙逼了。
經過幾年的摸索，我最終發(fā)現(xiàn)，知識點還是必須在工作中去練習才能真正的理解，或者通過一個具體的案例來融匯貫通。當然，我指的案例不是那種很多線下培訓機構為了講知識點而弄出來的案例。
比如這樣的：
for (var i = 0; i < 3 ; i ++) {
alert(i);
}
這就是典型的為了講而講，案例非常枯燥不說，而且花費大量的時間來練習這種語法級別的東西，堆砌這種并沒有什么意思的案例，真的很難引起初學者的興趣。
很多線下的培訓機構，包括大多數(shù)大學里的課程，就是這么做的。比如JAVA，一開始都會教著打印一個HelloWorld,然后中規(guī)中矩地講解for循環(huán)，打印九九乘法表。
接著，一個必然會講的東西就是冒泡排序，很多初學者在此卡殼，覺得JAVA怎么這么難啊！于是，他們開始自暴自棄，為了學而學，也不知道學了有什么用？
好不容易培訓完了，工作了幾年，突然發(fā)現(xiàn)，我好像從來沒用到什么冒泡排序啊？
誠然，你不去當算法工程師，就算會了冒泡排序又怎樣呢？算法這東西，需要時間的積累和技術的沉淀，我始終認為初學編程應該將重心放在方法的調用和興趣的培養(yǎng)上面，最起碼，必須得做點東西出來。基本的算法，時間長了自然會，初學者真沒必要花太多的時間在算法上，邏輯思維清晰的話還好一些，如果不是呢，那么很可能就會在剛開始學編程的時候就產生煩躁的情緒，這實在是得不償失。
好了，扯犢子結束了，下面開始愉快的編程之旅吧！
第一個案例，就做一個簡單的音樂播放器吧。
目錄結構
如圖，我已經在mp3文件夾內添加了兩首歌，現(xiàn)在打開index.html，里面是一個簡單的模板。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音樂小站</title>
</head>
<body>
</body>
<script type="text/javascript">
</script>
</html>
1. 利用audio標簽渲染一個播放器
<audio src='mp3/1.mp3' controls=""></audio>
audio是h5的一個標簽，以上代碼表示創(chuàng)建了一個播放器，并且播放文件指向了1.mp3這首歌，controls代表使用瀏覽器自帶的播放器界面。
渲染效果如圖，感覺還不錯，點擊左邊的播放按鈕就可以播放這首歌了哦。
2. 用js來控制音樂播放器
現(xiàn)在，我們不用瀏覽器自帶的控制界面，單純地用js來操作。因為自帶的界面未必能滿足我們的需要，比如上一首，下一首，歌詞等等。
我們將這一行代碼刪除。
<audio src='mp3/1.mp3' controls=""></audio>
第一步. 用js來創(chuàng)建一個audio元素。
var musicDom = document.createElement('audio');
第二步. 加載一首音樂。
musicDom.src = 'mp3/2.mp3';
第三步. 播放音樂。
musicDom.play();
這樣的話，當我們在此刷新頁面，歌曲就會被自動播放。
第四步. 開始將基本的方法封裝起來
一個音樂播放器，最基本的功能有：
1.初始化
2.添加歌曲
3.播放
4.暫停
5.下一首
6.上一首
var musicBox= {
musicDom : null, //播放器對象
songs : [], //歌曲目錄，用數(shù)組來存儲
//初始化音樂盒
init : function(){
this.musicDom = document.createElement('audio');
},
//添加一首音樂
add : function(src){
this.songs.push(src);
},
//根據(jù)數(shù)組下標決定播放哪一首歌
play : function(index){
this.musicDom.src = this.songs[index];
this.musicDom.play();
},
//暫停音樂
stop : function(){
this.musicDom.pause();
},
//下一首（待編寫）
next : function(){
},
//上一首（待編寫）
prev : function(){
}
}
我們將邏輯代碼用一個json對象包裹了起來，對音樂播放器進行了簡單的封裝，這樣看起來條理會比較清晰。其實，這已經是一個簡單的js小插件了，不是嗎？等以后做得比較完善的時候，我們完全可以將這個對象放到js文件里，作為一個js插件被其他頁面來調用。
js基礎我以后會專門開貼來總結，現(xiàn)在先就這么寫下去吧。
封裝插件也是學習js的一大樂趣呢！
好了，來測試一下吧:
musicBox.init(); //初始化
musicBox.add('mp3/1.mp3');
musicBox.add('mp3/2.mp3');
musicBox.play(0); //聽第一首歌
刷新頁面，雖然啥也沒有，但是動聽的音樂已然響起，我這邊的第一首歌曲是火影忍者的主題曲，很帶感哦。
第五步. 畫一個樣式吧！
這一步，我們來簡單繪制一個播放器的樣式，我盡可能寫詳細一點：
css：
width: 200px;
height:300px;
background:#ccc;
html：
<div id='music' class='music'></div>
效果：
接下來，讓這個div盒子相對于body居中。
還記得上一節(jié)《js常用方法和一些封裝》-- 時間相關（附案例詳解）嗎，里面就有一個現(xiàn)成的居中方法，還有獲取元素的方法。現(xiàn)在我們拿過來直接用：
//讓元素居中的方法
function _center(dom){
dom.style.position = 'absolute';
dom.style.top = '50%';
dom.style.left = '50%';
dom.style['margin-top'] = - dom.offsetHeight / 2 + 'px';
dom.style['margin-left'] = - dom.offsetWidth / 2 + 'px';
}
//根據(jù)id獲取元素
function dom(id){
if(id.toString().indexOf('#') != -1) {
id = id.replace('#','');
}
return document.getElementById(id);
};
調用
var musicDom = dom('#music');
_center(musicDom);
成功居中了。
接下來，我們將顏色調深一點，然后加上一點圓角：
background:#333;
border-radius: 5px;
再加上一點盒陰影 ：
box-shadow: 3px -3px 3px #666;
這樣就有一點陰影效果了。
下面，我們來繪制屏幕和按鈕區(qū)：
css:
.music {
width: 200px;
height:300px;
background:#333;
border-radius: 5px;
box-shadow: 3px -3px 3px #666;
position: relative;
}
.music .screen {
height:70%;
width:96%;
background: #ccc;
margin-left:2%;
margin-top: 2%;
}
.music .buttons {
height:25%;
width:96%;
background: wheat;
margin-left:2%;
margin-top: 2%;
}
html：
<div id='music' class='music'>
<div class='screen'></div>
<div class='buttons'></div>
</div>
效果：
我打算在屏幕區(qū)域加一個音樂的圖標，順便分享一下iconfont的使用吧。
番外：矢量圖標icontont的使用
這是阿里巴巴的一個矢量圖標庫，打開官網：
點擊所有公開庫，
搜索音樂，尋找我們需要的圖標：：
在搜索你喜歡的按鈕：
總之，你想要什么圖標，直接搜索就可以了。
我隨便挑了幾個按鈕，
點擊下載至本地，然后解壓：
里面有一個demo.html頁面，里面詳細介紹了iconfont的使用方法。
1.將如圖框起來的文件拷貝到項目的css文件夾，引入css文件
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
2.現(xiàn)在我們引入這個圖標
<div id='music' class='music'>
<div class='screen'>
<i id='music-icon' class="iconfont"></i>
</div>
<div class='buttons'></div>
</div>
效果：
](http://upload-images.jianshu.io/upload_images/1929342-3ea9916e3ae15311.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
成功了。
現(xiàn)在，我們還是要把這個小圖標居中顯示。
var musicIcon = dom('#music-icon');
_center(musicIcon);
咦，好像不對哦，看樣子是相對于最外面的music盒子居中定位了呢。
這是咋回事呢？通過這個小bug，可以引出一個定位的知識點。
原來，我們居中的原理是設置子元素的position為absolute，然后用top和left來實現(xiàn)的，如果父盒子沒有設置position,那么子元素會一直往上找，直到碰上一個有position并且不是static的元素來做定位。
在這個案例中 ,<div id='music' class='music'></div>是有定位的，所以就相對于它居中了。
了解原因之后，我們來給屏幕區(qū)域加一個position吧！
問題來了，給它設置absolute還是relative呢？
先看看加absolute的效果吧：
position: absolute;
靠，按鈕去不見了，嚇得我馬上F12打開調試模式一探究竟。
如圖，原來是擠上去了呀。其實道理也很簡單，當一個元素的position設置為absolute的時候，它就脫離文檔流，也就是說不占位置了。所以下面的div元素就會擠上來。就這么簡單。
而relative會保持之前的位置，不脫離文檔流。
position: relative;
成了，然后我們來調個色，把圖標也弄得大一點。
.music {
width: 200px;
height:300px;
background:#333;
border-radius: 5px;
box-shadow: 3px -3px 1px #666;
position: relative;
}
.music .screen {
height:70%;
width:96%;
background: linear-gradient(#403d3d,65%,#5f5b5b);
margin-left:2%;
margin-top: 2%;
position: relative;
}
.music .screen i {
color:#fff;
font-size: 88px;
}
.music .buttons {
height:25%;
width:96%;
margin-left:2%;
margin-top: 2%;
}
然后把按鈕添加上去：
css:
.music .screen i {
color:#fff;
font-size: 88px;
}
.music .buttons i {
color:#fff;
font-size: 24px;
margin-left: 28px;
position: relative;
top:25px;
}
.music .buttons i:hover {
cursor: pointer;
}
html:
<div id='music' class='music'>
<div class='screen'>
<i id='music-icon' class="iconfont"></i>
</div>
<div class='buttons'>
<i id='prev' class="iconfont"></i>
<i id='play' class="iconfont"></i>
<i id='next' class="iconfont"></i>
</div>
</div>
效果圖：
這是一套純黑色系的皮膚，你也可以自己設置css樣式來自定義喜歡的皮膚哦。
F12進入調試模式，像這樣：
你想要什么顏色都可以！
紅色：
藍色：
銀色：
土豪金：
在下一節(jié)，我們嘗試把各種皮膚封裝到組件里。
時間不早了，今天只完成了一個模板，下次我們再聊吧！
勘誤：
iconfont的圖片編碼沒能正常顯示，可能是markdown編輯器不支持吧。
就是如圖所示的編碼，markdown編輯器沒有正常顯示出來，額，這個小細節(jié)就先忽略吧，嘿嘿。
本章結束 ...
剽悍一小兔，電氣自動化畢業(yè)。
參加工作后對計算機感興趣，深知初學編程之艱辛。
希望將自己所學記錄下來，給初學者一點幫助。
免責聲明： 博客中所有的圖片素材均來自百度搜索，僅供學習交流，如有問題請聯(lián)系我，侵立刪，謝謝。
