如何驗證鋼琴鍵盤上按鍵的順序？

Question

我創造了這個鋼琴鍵盤。 它有聲音，但我無法在片段中添加它。 聲音由每個鍵的onclick屬性觸發，並通過 js 中的 function 播放。 我想驗證用戶是否按以下順序按下具有以下 ID 的鍵：c c ggaag，然后提示“成功”？ 我能做到的最短方法是什么？

 #piano { display: flex; margin: 1em; cursor: pointer; }.key { border-radius: 4px; }.white { height: 220px; width: 50px; background: white; border: 1px solid black; border-right: none; z-index: 0; }.white:last-child { border-right: 1px solid black; }.white:hover { filter: brightness(90%); }.white:active { filter: brightness(70%); }.black { position: absolute; height: 130px; width: 31px; background: black; z-index: 1; }.black:hover { background: #0f0f0f; }.black:active { background: #0a0a0a; } #c-sharp { margin-left: 36px; } #d-sharp { margin-left: 87px; } #f-sharp { margin-left: 189px; } #g-sharp { margin-left: 240px; } #a-sharp { margin-left: 291px; }

 <div id="piano"> <span class="white key" id="c"></span> <span class="black key" id="c-sharp"></span> <span class="white key" id="d"></span> <span class="black key" id="d-sharp"></span> <span class="white key" id="e"></span> <span class="white key" id="f"></span> <span class="black key" id="f-sharp"></span> <span class="white key" id="g"></span> <span class="black key" id="g-sharp"></span> <span class="white key" id="a"></span> <span class="black key" id="a-sharp"></span> <span class="white key" id="b"></span> </div>

Answer 1

我的方法看起來像這樣：

向每個跨度添加一個 eventListener，當它單擊 append 時，它的 id 將添加到一個名為pressed 的字符串中。 添加 id（例如“a”）后，將其與指定的訂單進行比較。

這應該以最簡單的方式解決問題:)

 let pressed = ''; document.querySelectorAll('span').forEach(item => { item.addEventListener('click', event => { pressed += item.id; if( pressed == 'ccggaag' ) { alert("Success"); } else { console.log(pressed); } }) })

 #piano { display: flex; margin: 1em; cursor: pointer; }.key { border-radius: 4px; }.white { height: 220px; width: 50px; background: white; border: 1px solid black; border-right: none; z-index: 0; }.white:last-child { border-right: 1px solid black; }.white:hover { filter: brightness(90%); }.white:active { filter: brightness(70%); }.black { position: absolute; height: 130px; width: 31px; background: black; z-index: 1; }.black:hover { background: #0f0f0f; }.black:active { background: #0a0a0a; } #c-sharp { margin-left: 36px; } #d-sharp { margin-left: 87px; } #f-sharp { margin-left: 189px; } #g-sharp { margin-left: 240px; } #a-sharp { margin-left: 291px; }

 <div id="piano"> <span class="white key" id="c"></span> <span class="black key" id="c-sharp"></span> <span class="white key" id="d"></span> <span class="black key" id="d-sharp"></span> <span class="white key" id="e"></span> <span class="white key" id="f"></span> <span class="black key" id="f-sharp"></span> <span class="white key" id="g"></span> <span class="black key" id="g-sharp"></span> <span class="white key" id="a"></span> <span class="black key" id="a-sharp"></span> <span class="white key" id="b"></span> </div>

Answer 2

首先，感謝那些回答的人，我想嘗試在不使用 jQuery 的情況下制作它。 因為我不知道，所以我這樣做是為了如果用戶弄錯一個按鈕，他們不必為頁面充電。 相反，他們可以只打開 go 並重試，這是一種非常“笨重”的方法，所以也許有人可以改進它：但它確實有效:)

 var y = ""; function melody(x) { y += x; if (y == "c" || y == "cc" || y == "ccg" || y == "ccgg" || y == "ccgga" || y == "ccggaa" || y == "ccggaag" ) { if (y == "ccggaag") { alert("Success;"); } } else y = ""; }

 #piano { display: flex; margin: 1em; cursor: pointer; }.key { border-radius: 4px; }.white { height: 220px; width: 50px; background: white; border: 1px solid black; border-right: none; z-index: 0; }.white:last-child { border-right: 1px solid black; }.white:hover { filter: brightness(90%); }.white:active { filter: brightness(70%); }.black { position: absolute; height: 130px; width: 31px; background: black; z-index: 1; }.black:hover { background: #0f0f0f; }.black:active { background: #0a0a0a; } #c-sharp { margin-left: 36px; } #d-sharp { margin-left: 87px; } #f-sharp { margin-left: 189px; } #g-sharp { margin-left: 240px; } #a-sharp { margin-left: 291px; }

 <div id="piano"> <span class="white key" id="c" onclick="melody('c')"></span> <span class="black key" id="c-sharp" onclick="melody('c#')"></span> <span class="white key" id="d" onclick="melody('d')"></span> <span class="black key" id="d-sharp" onclick="melody('d#')"></span> <span class="white key" id="e" onclick="melody('e')"></span> <span class="white key" id="f" onclick="melody('f')"></span> <span class="black key" id="f-sharp" onclick="melody('f#')"></span> <span class="white key" id="g" onclick="melody('g')"></span> <span class="black key" id="g-sharp" onclick="melody('g#')"></span> <span class="white key" id="a" onclick="melody('a')"></span> <span class="black key" id="a-sharp" onclick="melody('a#')"></span> <span class="white key" id="b" onclick="keysound(b); melody('b')"></span> </div>