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

Day1 JS: Drum Kit

XAMPP下载 admin 717浏览 0评论
 Day1 JS: Drum Kit
Demo

第1天的實作是建立一個類似打鼓就產生音效的網頁,當點擊鍵盤時會讓網頁的element產生音效和動態的畫面效果。

首先在畫面建立數個div元素,在每個div元素中,包含著span元素,span的內容是對應著鍵盤值。

<span>Q</span>
在每個div元素的屬性加入鍵盤的keycode,而鍵盤Q的keycode值等於81,因此在div中的屬性建立press-key=”81″,作為當事件觸發時所需要的值。

<div class=”key” press-key=”81″></div>
以及建立數個audio元素,每個audio都有各自的執行音效檔。

<audio keys=”81″ src=”./sounds/boom.wav”></audio>
接下來在畫面window建立監聽事件,觸發事件的動作為keydown,而keydown就是當鍵盤按下的動作即觸發事件。

當事件觸發時,首先抓取鍵盤按下時產生的keycode,並運用keycode值來取得對應的div和audio元素。

const audio = document.querySelector(`audio[keys=’${e.keyCode}’]`);
const key = document.querySelector(`div[press-key=’${e.keyCode}’]`);
接下來是執行audio元素,讓他播放音樂,並透過設定播放時間從0開始。

audio.currentTime = 0;
audio.play();
以及將key加入CSS,讓他產生動態效果,而key的動態效果是透過CSS中的transition屬性來執行的。

key.classList.add(‘playing’);
而當key的transition觸發完成後,要將動態效果給取消掉,是透過transitionend來觸發執行取消其動態效果。

Html
<div class=”key” press-key=”81″>
<span>Q</span>
</div>
<audio keys=”81″ src=”./sounds/boom.wav”></audio>
Javascript:
window
window 物件代表了一個包含 DOM 文件的視窗,其中的 document 屬性指向了視窗中載入的 Document 物件。而使用 document 的 defaultView 屬性,則可取得該 Document 物件所在的視窗 window 物件。

EventTarget.addEventListener()
EventTarget.addEventListener() 方法能將指定的事件監聽器註冊到 EventTarget 實作物件上。EventTarget 可能是 Document 中的 Element 物件、Document 物件本身、Window 物件,或是其它支援事件的物件(如:XMLHttpRequest)。

document.querySelector(selectors)
回傳 document 第一個符合特定選擇器群組的Element 物件。

document.querySelectorAll(selectors)
回傳 document 全部符合特定選擇器群組的Element 物件。

elementNodeReference.classList
Element.classList 唯讀屬性代表了該Element所擁有之類別屬性(Class Attribute)的即時更新集-DOMTokenList。

element.addEventListener(“transitionend”, function(event) {}
transitionend是當transition完成之後,接下來執行 transitionend中的事件。

NodeList
NodeList 物件是節點的集合,可藉由 Node.childNodes 屬性以及 document.querySelectorAll() 方法取得。

KeyboardEvent.keyCode
keycode是指當鍵盤下時產生鍵盤的對應值。
查詢鍵盤值keyCode1

CSS
transition
CSS transitions 是當Element產生變化時,控制它的變化速度。
CSS transitions provide a way to control animation speed when changing CSS properties.

transform
transform CSS 屬性可以讓你修改 CSS 可視化格式模型(visual formatting model)的空間維度。使用此屬性,元件可以被平移、旋轉、縮放和傾斜。

Summary
身為一位新人,想透過js30來學習對於js的基礎,並強迫自己來寫點筆記來紀錄學習過程,因為在之前學習程式時,很少做到筆記以及記錄,造成之後有時會發生寫過就忘記的狀況,因此趁這個鐵人賽機會來讓自己成長。如果30天有任何紀錄錯誤的地方歡迎指教,讓大家一起成長往前邁進。

tags: window, querySelector, querySelectorAll, transition

转载请注明:XAMPP中文组官网 » Day1 JS: Drum Kit

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