七、小钢琴

7.1 dom结构

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
<audio id="audio" autoplay></audio>

7.2 CSS样式

* {
    margin: 0;
    padding: 0;
}
ul {
    width: 700px;
    height: 400px;
    margin: 0 auto;
    border: 1px solid blue;
}
ul li {
    float: left;
    width: 100px;
    height: 100%;
    border-right: 1px solid blue;
    list-style: none;
    box-sizing: border-box;
}
ul li:last-child {
    border-right: none;
}

7.3 执行代码

// 获取元素
var lis = document.getElementsByTagName("li");
var audio = document.getElementById("audio");

// 添加onkeydown事件
document.onkeydown = function(e){
    // console.log(e);
    // 获取用户按下的字符
    // console.log(e.key);

    // 使用switch条件语句
    switch (e.key) {
        // case "1":
        //     lis[e.key - 1].style.backgroundColor = "red";
        //     break;
        // case "2":
        //     lis[e.key - 1].style.backgroundColor = "orange";
        //     break;
        // case "3":
        //     lis[e.key - 1].style.backgroundColor = "yellow";
        //     break;
        // case "4":
        //     lis[e.key - 1].style.backgroundColor = "green";
        //     break;                
        // case "5":
        //     lis[e.key - 1].style.backgroundColor = "blue";
        //     break;
        // case "6":
        //     lis[e.key - 1].style.backgroundColor = "indigo";
        //     break;
        // case "7":
        //     lis[e.key - 1].style.backgroundColor = "purple";
        //     break;

        case "1":
        case "2":
        case "3":
        case "4":
        case "5":
        case "6":
        case "7":
            lis[e.key - 1].style.backgroundColor = "red";
            audio.src = "audio/" + e.key + ".mp3";
            break;
        default:
            console.log("你按的是" + e.key + ",别瞎按");
            break;
    }
}

// 键盘抬起
document.onkeyup = function(e){
    // 使用switch
    switch (e.key) {
        case "1":
        case "2":
        case "3":
        case "4":
        case "5":
        case "6":
        case "7":
            lis[e.key - 1].style.backgroundColor = "white";
            break;
        default:
            break;
    }
}

7.4 执行结果