最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

JS30-Day1

XAMPP下载 admin 662浏览 0评论
 Day1
先上DEMO頁面
第一天主要做的事情為透過監聽使用者按下的按鈕,是否是預設好帶有音效的按鈕,如果是的話,就發出相對應的音效,如果不是的話當然就不理會囉

接下來上code的部分:
首先在html上面,新增我們要監聽的區塊,然後綁定相對應的data-key,如果要查詢鍵盤的data-key,可以上這邊查詢

<div class=”keys”>
<div data-key=”65″ class=”key”>
<div>A</div>
<span class=”sound”>Drum1</span>
</div>
<div data-key=”83″ class=”key”>
<div>S</div>
<span class=”sound”>Drum2</span>
</div>
<div data-key=”68″ class=”key”>
<div>D</div>
<span class=”sound”>Drum3</span>
</div>
<div data-key=”70″ class=”key”>
<div>F</div>
<span class=”sound”>Drum4</span>
</div>
<div data-key=”71″ class=”key”>
<div>G</div>
<span class=”sound”>Drum5</span>
</div>
<div data-key=”72″ class=”key”>
<div>H</div>
<span class=”sound”>Drum6</span>
</div>
<div data-key=”74″ class=”key”>
<div>J</div>
<span class=”sound”>Drum7</span>
</div>
<div data-key=”75″ class=”key”>
<div>K</div>
<span class=”sound”>Drum8</span>
</div>
<div data-key=”76″ class=”key”>
<div>L</div>
<span class=”sound”>Drum9</span>
</div>
</div>

<audio data-key=”65″ src=”sounds/drum1.mp3″></audio>
<audio data-key=”83″ src=”sounds/drum2.mp3″></audio>
<audio data-key=”68″ src=”sounds/drum3.mp3″></audio>
<audio data-key=”70″ src=”sounds/drum4.mp3″></audio>
<audio data-key=”71″ src=”sounds/drum5.mp3″></audio>
<audio data-key=”72″ src=”sounds/drum6.mp3″></audio>
<audio data-key=”74″ src=”sounds/drum7.mp3″></audio>
<audio data-key=”75″ src=”sounds/drum8.mp3″></audio>
<audio data-key=”76″ src=”sounds/drum9.mp3″></audio>
在js的部分呢,要做的事情為監聽當使用者按下對應按鍵後發出相對應的音效,以及同時在該div區塊上新增上有變化效果的classname,以及監聽當變化完成之後,拿掉這個classname

//選擇class為.key的元素
let keys = Array.from(document.querySelectorAll(‘.key’))
//keys不是真的陣列,是nodeList,所以無法使用所有array的methods,使用forEach綁定事件

// keys.forEach(function(key){
//     addEventListener(‘transitionend’,removeTransition)
// }) 可簡寫成箭頭函式
keys.forEach(key => key.addEventListener(‘transitionend’,removeTransition))

window.addEventListener(‘keydown’,playSound)
//在transition結束時會觸發的function
function removeTransition(e){
//e.propertyName會包含所有transition的屬性,我們這邊只需要transform
if(e.propertyName !== ‘transform’) return;
e.target.classList.remove(‘playing’)
}
//播放音效的function
function playSound(e){
const audio = document.querySelector(`audio[data-key=”${e.keyCode}”`)
const key = document.querySelector(`div[data-key=”${e.keyCode}”`)
//如果按下的按鍵不是預先設有音效的按鍵,就return掉結束function
if(!audio) return
//按下的按鍵增加playing這個class
key.classList.add(‘playing’)
//讓每次播放音效都從0秒開始
audio.currentTime = 0
//播放音效
audio.play()
}
以上就是第一天的內容!還有29天慢慢完成吧。

转载请注明:XAMPP中文组官网 » JS30-Day1

您必须 登录 才能发表评论!