2019/0221/前端Javascript musicplay、內聚力耦合率
JS物件事件撰寫模式
應用層式串API
啟動USER電腦的作業系統控制他的硬體
提升內聚力
(同一個FUNCTION裡面所有程式碼都要有關聯)
降低耦合力
(功能模組跟功能模組間不能有太大牽連，改1不能動到2，頂多A的值到B使用)
簡單來講 複雜 麻煩 就要簡化
使用者操作介面
stop = pause load
pause = pause
Webdings
動態產生時無法加onClick 或想要將js跟html切開
變數故意數名跟屬性名稱相同
事件監聽器(EventListener) -> click
play.addEventListener("click", PlayMusic)marquee html 跑馬燈tag
function 自訂功能函式/名稱/ (自訂變數/參數/){ /功能函式/ }
值被改變事件是 change
沒有提示字不代表沒那個功能還是要上w3c查
前端偵錯 f12 console 紅字
結構化程式設計
很多時候是少功能或少切換中的細小功能而不是程式碼錯誤，因為電腦很笨只會一步一步來。
innertext
抓值做判斷
寫程式=堆積木=越多越高=減少積木但不倒
第一次 內聚力太低
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#ControlPanel{
width:600px;
margin:auto;
border:5px solid
}
#FuncBtn > span {
border: 2px solid;
box-shadow: 3px 3px 3px black;
cursor: pointer;
font-family: Webdings;
font-size: 24pt;
}
</style>
</head>
<body>
<audio id="audio">
<source id="song" src="music/nothing.mp3" type="audio/mpeg" />
</audio>
<div id="ControlPanel">
<select id="music">
<option value="music/nothing.mp3">Nothing Gonna Change My Love For You</option>
<option value="music/nomouth.mp3">真的不想嘴</option>
<option value="music/travel.mp3">帶你去旅行</option>
</select>
<div id="FuncBtn">
<span id="play">4</span>
<span id="pause">;</span>
<span id="stop"><</span>
</div>
<div id="InfoPanel">
<marquee id="info">請按播放鈕~~~~~</marquee>
</div>
</div>
<script>
var audio = document.getElementById("audio");
var play = document.getElementById("play");
var pause = document.getElementById("pause");
var stop = document.getElementById("stop");
var info = document.getElementById("info");
var music = document.getElementById("music");
var song = document.getElementById("song");
play.addEventListener("click", PlayMusic);
pause.addEventListener("click", PauseMusic);
stop.addEventListener("click", StopMusic);
music.addEventListener("change", ChangeMusic);
function PlayMusic() {
audio.play();
ShowStatus(1);
}
function PauseMusic() {
audio.pause();
ShowStatus(2);
}
function StopMusic() {
audio.pause();
audio.load();
ShowStatus(3);
}
function ChangeMusic() {
song.src = music.options[music.selectedIndex].value;
audio.load();
if (info.innerText =="音樂播放中")
PlayMusic();
}
function ShowStatus(status) {
var strStatus = "";
switch (status) {
case 1:
strStatus = "音樂播放中";
break;
case 2:
strStatus = "音樂暫停";
break;
case 3:
strStatus = "音樂停止";
break;
}
info.innerText = strStatus;
}
</script>
</body>
</html>第二次 耦合率太大
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
#ControlPanel{
width:600px;
margin:auto;
border:5px solid
}
#FuncBtn > span {
border: 2px solid;
box-shadow: 3px 3px 3px black;
cursor: pointer;
font-family: Webdings;
font-size: 24pt;
}
</style>
</head>
<body>
<audio id="audio">
<source id="song" src="music/nothing.mp3" type="audio/mpeg" />
</audio>
<div id="ControlPanel">
<select id="music">
<option value="music/nothing.mp3">Nothing Gonna Change My Love For You</option>
<option value="music/nomouth.mp3">真的不想嘴</option>
<option value="music/travel.mp3">帶你去旅行</option>
</select>
<div id="FuncBtn">
<span id="play">4</span>
<!--<span id="pause">;</span>-->
<span id="stop"><</span>
</div>
<div id="InfoPanel">
<marquee id="info">請按播放鈕~~~~~</marquee>
</div>
</div>
<script>
var audio = document.getElementById("audio");
var play = document.getElementById("play");
//var pause = document.getElementById("pause");
var stop = document.getElementById("stop");
var info = document.getElementById("info");
var music = document.getElementById("music");
var song = document.getElementById("song");
play.addEventListener("click", PlayMusic);
//pause.addEventListener("click", PauseMusic);
stop.addEventListener("click", StopMusic);
music.addEventListener("change", ChangeMusic);
function PlayMusic() {
audio.play();
ShowStatus(1);
if (play.innerText == "4")
play.innerText = ";";
else {
play.innerText = "4";
PauseMusic();
}
}
function PauseMusic() {
audio.pause();
ShowStatus(2);
}
function StopMusic() {
audio.pause();
audio.load();
play.innerText = "4";
ShowStatus(3);
}
function ChangeMusic() {
song.src = music.options[music.selectedIndex].value;
audio.load();
if (info.innerText =="音樂播放中")
PlayMusic();
}
function ShowStatus(status) {
var strStatus = "";
switch (status) {
case 1:
strStatus = "音樂播放中";
break;
case 2:
strStatus = "音樂暫停";
break;
case 3:
strStatus = "音樂停止";
break;
}
info.innerText = strStatus;
}
</script>
</body>
</html>Last updated