close
Skip to content

test #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Yichia1023 wants to merge 15 commits into
base: master
Choose a base branch
from
Open

test #3

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
74a4724
change
NthuEconINTP Apr 15, 2025
1c8d6f9
完成寫死的
NthuEconINTP Apr 15, 2025
8239807
先完成playHandler
NthuEconINTP Apr 20, 2025
d628a24
transition
NthuEconINTP Apr 20, 2025
11ec27c
test yichia
Yichia1023 Apr 20, 2025
5f21565
cheange
NthuEconINTP Apr 21, 2025
e78bdfe
add new file day2
NthuEconINTP Apr 21, 2025
93b76b7
day2
NthuEconINTP Apr 29, 2025
d0975ce
add day3 new file
NthuEconINTP Apr 29, 2025
d005ffe
day3 比較笨的寫法
NthuEconINTP Apr 29, 2025
a2a0613
day3
NthuEconINTP May 10, 2025
0f64e38
day2
Yichia1023 May 18, 2025
13720f8
Merge branch 'master' of https://github.com/NthuEconINTP/JavaScript30
Yichia1023 May 18, 2025
380ce84
day3完成
Yichia1023 May 20, 2025
cc44e0d
Create index-Mike.html
NthuEconINTP Jun 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
day2
  • Loading branch information
@Yichia1023
Yichia1023 committed May 18, 2025
commit 0f64e387f023ccef8b66e9efba153c3fe37ce1e1
127 changes: 127 additions & 0 deletions 01_Java-Script-Drum-Kit/index-Yichia.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>JS Drum Kit</title>
<link rel="stylesheet" href="style.css" />
<link rel="icon" href="https://fav.farm/🔥" />
</head>
<body>
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span class="sound">clap</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span class="sound">hihat</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span class="sound">kick</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span class="sound">openhat</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span class="sound">boom</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span class="sound">ride</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span class="sound">snare</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span class="sound">tom</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span class="sound">tink</span>
</div>
</div>

<audio data-key="65" src="sounds/clap.wav"></audio>
<audio data-key="83" src="sounds/hihat.wav"></audio>
<audio data-key="68" src="sounds/kick.wav"></audio>
<audio data-key="70" src="sounds/openhat.wav"></audio>
<audio data-key="71" src="sounds/boom.wav"></audio>
<audio data-key="72" src="sounds/ride.wav"></audio>
<audio data-key="74" src="sounds/snare.wav"></audio>
<audio data-key="75" src="sounds/tom.wav"></audio>
<audio data-key="76" src="sounds/tink.wav"></audio>
</body>
<script>
// 我的思路

const keys = document.querySelectorAll(".key");
// const keys = document.querySelectorAll(".key").dataset; //多數的話不能這樣用，單個可以取出dataset
console.log(keys);
const audio = document.querySelectorAll("audio");
console.log(audio);
//比對div跟audio的dataset一致
// keys.addevent nodelist不能直接用addenevtListener,單一DOM才能。
//div 元素本身預設無法接收鍵盤事
// keys.forEach((key) => {
// key.addEventListener("keydown", (e) => {
// console.log(key);
// });
// });
// 用 document 平常操作 DOM（點擊、輸入、鍵盤）
// 用 window 需要全局監聽鍵盤、resize、scroll

document.addEventListener("keydown", (e) => {
// console.log(e.keyCode);
keys.forEach((key) => {
// console.log(key.dataset.key);
if (key.dataset.key == e.keyCode) {
const selected = key.dataset.key;
audio.forEach((a) => {
if (a.dataset.key == selected) {
// console.log(a.dataset.key);
a.currentTime = 0; //??
a.play();
key.classList.add("playing");
setTimeout(() => {
key.classList.remove("playing");
}, 200);
}
});
}
});
});
</script>

<!-- ＧＰＴ給的答案 -->

<!-- <script>
const keys = document.querySelectorAll(".key");

window.addEventListener("keydown", (e) => {
const keyCode = e.keyCode; // 抓到按下去的鍵
const audio = document.querySelector(`audio[data-key="${keyCode}"]`);
const key = document.querySelector(`.key[data-key="${keyCode}"]`);

if (!audio) return; // 如果找不到對應的音效，就跳出
audio.currentTime = 0; // 每次按都從頭播放
audio.play(); // 播放聲音

key.classList.add("playing"); // 加上動畫效果
});

// 給每個 key 加上動畫結束後移除 class
function removeTransition(e) {
if (e.propertyName !== "transform") return; // 只抓 transform 的動畫結束
this.classList.remove("playing");
}

keys.forEach((key) =>
key.addEventListener("transitionend", removeTransition)
);
</script> -->
</html>
108 changes: 50 additions & 58 deletions 02_JS-and-CSS-Clock/index-START.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS + CSS Clock</title>
</head>
<body>


<head>
<meta charset="UTF-8" />
<title>JS + CSS Clock</title>
</head>
<body>
<div class="clock">
<div class="clock-face">
<div class="hand hour-hand"></div>
Expand All @@ -15,60 +13,54 @@
</div>
</div>

<style>
html {
background: #018ded url(http://unsplash.it/1500/1000?image=881&blur=50);
background-size: cover;
font-family: "helvetica neue";
text-align: center;
font-size: 10px;
}

<style>
html {
background:#018DED url(http://unsplash.it/1500/1000?image=881&blur=50);
background-size:cover;
font-family:'helvetica neue';
text-align: center;
font-size: 10px;
}

body {
margin: 0;
font-size: 2rem;
display:flex;
flex:1;
min-height: 100vh;
align-items: center;
}

.clock {
width: 30rem;
height: 30rem;
border:20px solid white;
border-radius:50%;
margin:50px auto;
position: relative;
padding:2rem;
box-shadow:
0 0 0 4px rgba(0,0,0,0.1),
inset 0 0 0 3px #EFEFEF,
inset 0 0 10px black,
0 0 10px rgba(0,0,0,0.2);
}

.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(-3px); /* account for the height of the clock hands */
}

.hand {
width:50%;
height:6px;
background:black;
position: absolute;
top:50%;
}
body {
margin: 0;
font-size: 2rem;
display: flex;
flex: 1;
min-height: 100vh;
align-items: center;
}

</style>
.clock {
width: 30rem;
height: 30rem;
border: 20px solid white;
border-radius: 50%;
margin: 50px auto;
position: relative;
padding: 2rem;
box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), inset 0 0 0 3px #efefef,
inset 0 0 10px black, 0 0 10px rgba(0, 0, 0, 0.2);
}

<script>
.clock-face {
position: relative;
width: 100%;
height: 100%;
transform: translateY(
-3px
); /* account for the height of the clock hands */
}

.hand {
width: 50%;
height: 6px;
background: black;
position: absolute;
top: 50%;
}
</style>

</script>
</body>
<script></script>
</body>
</html>
Loading