序
接觸簡書也有一段日子了列牺，這中間的時(shí)光還是比較輕松加愉快的整陌，那種可以和他人分享知識(shí)的欣喜和愉悅的確是非常棒。我一向都是覺得專心寫自己的文就可以了瞎领，不會(huì)總是糾結(jié)有多少人在看泌辫，有多少點(diǎn)擊等等。用心寫好自己的文九默，體會(huì)那種分享的快樂震放，就可以了。
之前寫的《js常用方法和一些封裝》系列暫且告一段落驼修，接下來殿遂，我會(huì)通過各種案例，來分享javascript的各種技巧乙各，所以最終將這個(gè)系列的名稱定為：《從案例中學(xué)習(xí)JavaScript》,回想到自己初學(xué)編程時(shí)候的各種艱辛墨礁，買了很多書，然而這些書大多為泛泛而談耳峦，或者東拼西湊恩静。市面上充斥著各種多少多少天從入門到精通的書籍，我曾經(jīng)也花了好多大洋，滿懷信心地買了類似的書驶乾，結(jié)果我就零基礎(chǔ)從入門到蒙逼了邑飒。
經(jīng)過幾年的摸索，我最終發(fā)現(xiàn)级乐，知識(shí)點(diǎn)還是必須在工作中去練習(xí)才能真正的理解疙咸，或者通過一個(gè)具體的案例來融匯貫通。當(dāng)然风科，我指的案例不是那種很多線下培訓(xùn)機(jī)構(gòu)為了講知識(shí)點(diǎn)而弄出來的案例撒轮。
比如這樣的：
for (var i = 0; i < 3 ; i ++) {
alert(i);
}
這就是典型的為了講而講，案例非池ぶ兀枯燥不說腔召，而且花費(fèi)大量的時(shí)間來練習(xí)這種語法級(jí)別的東西杆查，堆砌這種并沒有什么意思的案例扮惦，真的很難引起初學(xué)者的興趣。
很多線下的培訓(xùn)機(jī)構(gòu)亲桦，包括大多數(shù)大學(xué)里的課程崖蜜，就是這么做的。比如JAVA客峭，一開始都會(huì)教著打印一個(gè)HelloWorld,然后中規(guī)中矩地講解for循環(huán)豫领，打印九九乘法表。
接著舔琅，一個(gè)必然會(huì)講的東西就是冒泡排序等恐，很多初學(xué)者在此卡殼，覺得JAVA怎么這么難氨蛤尽课蔬！于是，他們開始自暴自棄郊尝，為了學(xué)而學(xué)二跋，也不知道學(xué)了有什么用？
好不容易培訓(xùn)完了流昏，工作了幾年扎即，突然發(fā)現(xiàn)，我好像從來沒用到什么冒泡排序翱隽埂谚鄙？
誠然，你不去當(dāng)算法工程師刁绒，就算會(huì)了冒泡排序又怎樣呢闷营？算法這東西，需要時(shí)間的積累和技術(shù)的沉淀膛锭，我始終認(rèn)為初學(xué)編程應(yīng)該將重心放在方法的調(diào)用和興趣的培養(yǎng)上面粮坞，最起碼蚊荣，必須得做點(diǎn)東西出來∧荆基本的算法互例，時(shí)間長了自然會(huì)，初學(xué)者真沒必要花太多的時(shí)間在算法上筝闹，邏輯思維清晰的話還好一些媳叨，如果不是呢，那么很可能就會(huì)在剛開始學(xué)編程的時(shí)候就產(chǎn)生煩躁的情緒关顷，這實(shí)在是得不償失糊秆。
好了，扯犢子結(jié)束了议双，下面開始愉快的編程之旅吧痘番！
第一個(gè)案例，就做一個(gè)簡單的音樂播放器吧平痰。
目錄結(jié)構(gòu)
如圖汞舱，我已經(jīng)在mp3文件夾內(nèi)添加了兩首歌，現(xiàn)在打開index.html宗雇，里面是一個(gè)簡單的模板昂芜。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>音樂小站</title>
</head>
<body>
</body>
<script type="text/javascript">
</script>
</html>
1. 利用audio標(biāo)簽渲染一個(gè)播放器
<audio src='mp3/1.mp3' controls=""></audio>
audio是h5的一個(gè)標(biāo)簽，以上代碼表示創(chuàng)建了一個(gè)播放器赔蒲，并且播放文件指向了1.mp3這首歌泌神，controls代表使用瀏覽器自帶的播放器界面。
渲染效果如圖舞虱，感覺還不錯(cuò)欢际，點(diǎn)擊左邊的播放按鈕就可以播放這首歌了哦。
2. 用js來控制音樂播放器
現(xiàn)在砾嫉，我們不用瀏覽器自帶的控制界面幼苛，單純地用js來操作。因?yàn)樽詭У慕缑嫖幢啬軡M足我們的需要焕刮，比如上一首舶沿，下一首，歌詞等等配并。
我們將這一行代碼刪除括荡。
<audio src='mp3/1.mp3' controls=""></audio>
第一步. 用js來創(chuàng)建一個(gè)audio元素。
var musicDom = document.createElement('audio');
第二步. 加載一首音樂溉旋。
musicDom.src = 'mp3/2.mp3';
第三步. 播放音樂畸冲。
musicDom.play();
這樣的話，當(dāng)我們?cè)诖怂⑿马撁妫枨蜁?huì)被自動(dòng)播放邑闲。
第四步. 開始將基本的方法封裝起來
一個(gè)音樂播放器算行，最基本的功能有：
1.初始化
2.添加歌曲
3.播放
4.暫停
5.下一首
6.上一首
var musicBox= {
musicDom : null, //播放器對(duì)象
songs : [], //歌曲目錄，用數(shù)組來存儲(chǔ)
//初始化音樂盒
init : function(){
this.musicDom = document.createElement('audio');
},
//添加一首音樂
add : function(src){
this.songs.push(src);
},
//根據(jù)數(shù)組下標(biāo)決定播放哪一首歌
play : function(index){
this.musicDom.src = this.songs[index];
this.musicDom.play();
},
//暫停音樂
stop : function(){
this.musicDom.pause();
},
//下一首（待編寫）
next : function(){
},
//上一首（待編寫）
prev : function(){
}
}
我們將邏輯代碼用一個(gè)json對(duì)象包裹了起來苫耸，對(duì)音樂播放器進(jìn)行了簡單的封裝州邢，這樣看起來?xiàng)l理會(huì)比較清晰。其實(shí)褪子，這已經(jīng)是一個(gè)簡單的js小插件了量淌，不是嗎？等以后做得比較完善的時(shí)候嫌褪，我們完全可以將這個(gè)對(duì)象放到j(luò)s文件里呀枢，作為一個(gè)js插件被其他頁面來調(diào)用。
js基礎(chǔ)我以后會(huì)專門開貼來總結(jié)笼痛，現(xiàn)在先就這么寫下去吧裙秋。
封裝插件也是學(xué)習(xí)js的一大樂趣呢！
好了晃痴，來測(cè)試一下吧:
musicBox.init(); //初始化
musicBox.add('mp3/1.mp3');
musicBox.add('mp3/2.mp3');
musicBox.play(0); //聽第一首歌
刷新頁面残吩，雖然啥也沒有，但是動(dòng)聽的音樂已然響起倘核，我這邊的第一首歌曲是火影忍者的主題曲，很帶感哦即彪。
第五步. 畫一個(gè)樣式吧紧唱！
這一步，我們來簡單繪制一個(gè)播放器的樣式隶校，我盡可能寫詳細(xì)一點(diǎn)：
css：
width: 200px;
height:300px;
background:#ccc;
html：
<div id='music' class='music'></div>
效果：
接下來漏益，讓這個(gè)div盒子相對(duì)于body居中。
還記得上一節(jié)《js常用方法和一些封裝》-- 時(shí)間相關(guān)（附案例詳解）嗎深胳，里面就有一個(gè)現(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);
};
調(diào)用
var musicDom = dom('#music');
_center(musicDom);
成功居中了舞终。
接下來轻庆，我們將顏色調(diào)深一點(diǎn)，然后加上一點(diǎn)圓角：
background:#333;
border-radius: 5px;
再加上一點(diǎn)盒陰影 ：
box-shadow: 3px -3px 3px #666;
這樣就有一點(diǎn)陰影效果了敛劝。
下面余爆，我們來繪制屏幕和按鈕區(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ū)域加一個(gè)音樂的圖標(biāo)，順便分享一下iconfont的使用吧夸盟。
番外：矢量圖標(biāo)icontont的使用
這是阿里巴巴的一個(gè)矢量圖標(biāo)庫蛾方，打開官網(wǎng)：
點(diǎn)擊所有公開庫，
搜索音樂，尋找我們需要的圖標(biāo)：：
在搜索你喜歡的按鈕：
總之桩砰，你想要什么圖標(biāo)拓春，直接搜索就可以了。
我隨便挑了幾個(gè)按鈕亚隅，
點(diǎn)擊下載至本地痘儡，然后解壓：
里面有一個(gè)demo.html頁面，里面詳細(xì)介紹了iconfont的使用方法枢步。
1.將如圖框起來的文件拷貝到項(xiàng)目的css文件夾沉删，引入css文件
<link rel="stylesheet" type="text/css" href="css/iconfont.css"/>
2.現(xiàn)在我們引入這個(gè)圖標(biāo)
<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)在醉途，我們還是要把這個(gè)小圖標(biāo)居中顯示矾瑰。
var musicIcon = dom('#music-icon');
_center(musicIcon);
咦，好像不對(duì)哦隘擎，看樣子是相對(duì)于最外面的music盒子居中定位了呢殴穴。
這是咋回事呢？通過這個(gè)小bug货葬，可以引出一個(gè)定位的知識(shí)點(diǎn)采幌。
原來，我們居中的原理是設(shè)置子元素的position為absolute震桶，然后用top和left來實(shí)現(xiàn)的休傍，如果父盒子沒有設(shè)置position,那么子元素會(huì)一直往上找，直到碰上一個(gè)有position并且不是static的元素來做定位蹲姐。
在這個(gè)案例中 ,<div id='music' class='music'></div>是有定位的磨取，所以就相對(duì)于它居中了。
了解原因之后柴墩，我們來給屏幕區(qū)域加一個(gè)position吧忙厌！
問題來了，給它設(shè)置absolute還是relative呢江咳？
先看看加absolute的效果吧：
position: absolute;
靠逢净，按鈕去不見了，嚇得我馬上F12打開調(diào)試模式一探究竟歼指。
如圖爹土，原來是擠上去了呀。其實(shí)道理也很簡單东臀，當(dāng)一個(gè)元素的position設(shè)置為absolute的時(shí)候着饥，它就脫離文檔流，也就是說不占位置了惰赋。所以下面的div元素就會(huì)擠上來宰掉。就這么簡單呵哨。
而relative會(huì)保持之前的位置，不脫離文檔流轨奄。
position: relative;
成了孟害，然后我們來調(diào)個(gè)色，把圖標(biāo)也弄得大一點(diǎn)挪拟。
.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>
效果圖：
這是一套純黑色系的皮膚挨务，你也可以自己設(shè)置css樣式來自定義喜歡的皮膚哦。
F12進(jìn)入調(diào)試模式玉组，像這樣：
你想要什么顏色都可以谎柄！
紅色：
藍(lán)色：
銀色：
土豪金：
在下一節(jié)，我們嘗試把各種皮膚封裝到組件里惯雳。
時(shí)間不早了朝巫，今天只完成了一個(gè)模板，下次我們?cè)倭陌桑?/p>
勘誤：
iconfont的圖片編碼沒能正常顯示石景，可能是markdown編輯器不支持吧劈猿。
就是如圖所示的編碼，markdown編輯器沒有正常顯示出來潮孽，額揪荣，這個(gè)小細(xì)節(jié)就先忽略吧，嘿嘿往史。
本章結(jié)束 ...
剽悍一小兔仗颈，電氣自動(dòng)化畢業(yè)。
參加工作后對(duì)計(jì)算機(jī)感興趣怠堪，深知初學(xué)編程之艱辛揽乱。
希望將自己所學(xué)記錄下來，給初學(xué)者一點(diǎn)幫助粟矿。
免責(zé)聲明： 博客中所有的圖片素材均來自百度搜索，僅供學(xué)習(xí)交流损拢，如有問題請(qǐng)聯(lián)系我陌粹，侵立刪，謝謝福压。
