01 JavaScript Drum Kit
效果展示
通過按鍵來播放音頻及改樣式，
相關知識
-
<kbd>標簽：定義鍵盤文本，表示文本是從鍵盤上鍵入的，將產生一個行內元素，以瀏覽器的默認 monospace 字體顯示，
-
data-* 屬性：
-
HTML5 新增
-
custom data attributes；賦予我們在所有 HTML 元素上嵌入自定義資料屬性的能力，并可以通過腳本在 HTML 與 DOM 表現之間進行專有資料的交換
-
屬性名不包含大寫字母
-
-
querySelector() 方法：
- 接收一個CSS選擇符，回傳與該模式匹配的第一個元素，如果沒有找到匹配的元素，回傳null
- querySelector() 獲取靜態集合，獲取到元素之后就和 html 中的這個元素沒有關系了，即只要不再取一次，則維持原來內容、不變
- getElementBy*() 獲取動態集合，每一次在 Javascript 函式中使用這個變數的時候都會再去訪問一下這個變數對應的 html 元素
-
立即函式
(function() {})();：- 參考
- IIFE
-
classList 屬性：
-
回傳元素的類名，作為 DOMTokenList 物件
-
為
<div>元素添加 class：document.getElementById("myDIV").classList.add("mystyle");
-
-
currentTime 屬性：
- 設定或回傳視頻播放的當前位置；當設定該屬性時，播放會跳躍到指定的位置
- 設定為 0 可以讓例子里的音頻連續播放
-
addEventListener() 方法：
- document.addEventListener(event, function, useCapture)
- 當 event 為 transitionend 時，表示該事件在 CSS 完成過渡后觸發
-
forEach() 方法：
- 用于呼叫陣列的每個元素，并將元素傳遞給回呼函式
-
currentTarget 事件屬性：回傳其監聽器觸發事件的節點，即當前處理該事件的元素、檔案或視窗，
代碼展示
思路
style.css
html {
font-size: 10px;
background: url(img/stars.jpg);
background-size: cover;
}
body, html {
margin: 0;
padding: 0;
font-family: sans-serif;
}
.keys {
display: flex;
flex: 1;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.key {
margin: 1rem;
padding: 1rem .5rem;
width: 10rem;
color: white;
text-align: center;
text-shadow: 0 0 .5rem black;
font-size: 1.5rem;
background: rgba(0,0,0,0.4);
border: .4rem solid black;
border-radius: .5rem;
transition: all .07s ease;
}
.playing {
border-color: #ffc600;
box-shadow: 0 0 1rem #ffc600;
transform: scale(1.1);
}
kbd {
display: block;
font-size: 4rem;
}
.sound {
font-size: 1.2rem;
color: #ffc600;
text-transform: uppercase;
letter-spacing: .1rem;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href=https://www.cnblogs.com/gullrye/p/"style.css">
<body>
A
clap
S
hihat
D
kick
F
openhat
G
boom
H
ride
J
snare
K
tom
L
tink
<script>
(function () {
function playSound(e) {
// data-key 后的 keyCode 別忘記加引號
const audio = document.querySelector('audio[data-key="' + e.keyCode + '"]');
// ES6 寫法
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
if (audio) {
audio.currentTime = 0;
audio.play();
}
if (key)
key.classList.add("playing");
}
function removeTransition(e) {
// 查看 propertyName
// console.log(e);
// 在這個頁面中，發生 transition 的樣式屬性有多個（box-shadow, transform, border-color），所以需要添加一個判斷陳述句，使每發生一次按鍵事件時，只去除一次樣式，下方代碼中 transform 也可改為 border-left-color 等，
if (e.propertyName === 'transform') {
e.currentTarget.classList.remove('playing');
}
}
window.addEventListener('keydown',
// function (e) {
// console.log(e.keyCode);
// }
playSound);
document.querySelectorAll('.key').forEach(function (key) {
key.addEventListener('transitionend', removeTransition);
});
})();
</script>
</body>
</html>
參考
- bilibili: 深入淺出 Javascript30 快速導覽
- GitHub: soyaine/JavaScript30
- GitHub: wesbos/JavaScript30
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/5460.html
標籤：JavaScript
下一篇：代碼之旅：基礎規范