化身乐队鼓手一JavaScript （超有成就感的HTML5页面）

站长

2024年08月07日 21:03 · 阅读数 20

正在努力学习 JavaScript 的 jym，今天我们就拿这个网页练练手吧。

布局

不难看出，布局由一个大盒子和许多个小盒子组成，结构非常简单，下面是实现代码。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rich Web Application With HTML5</title>
    <link rel="stylesheet" href="./common.css">
</head>
<body>
    <div class="keys">
        <div class="key" data-key="65">
            <div class="title">A</div>
            <span class="sound">clap</span>
        </div>
        <div class="key" data-key="83">
            <div class="title">S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key" data-key="68">
            <div class="title">D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key" data-key="70">
            <div class="title">F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key" data-key="71">
            <div class="title">G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key" data-key="72">
            <div class="title">H</div>
            <span class="sound">sound</span>
        </div>
        <div class="key" data-key="74">
            <div class="title">J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key" data-key="75">
            <div class="title">K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key" data-key="76">
            <div class="title">L</div>
            <span class="sound">tink</span>
        </div>
    </div>
    <script src="./common.js"></script>
</body>
</html>

其中也有些细节，比如将css放在头部，将js放在尾部。为什么要这样做呢？ 在头部的css可以将页面更快地显示出来，而js没有必要那么早的加载，所以可以直接放在底部，并且很多情况JavaScript会阻塞页面加载。

样式

给上一些简单的字体样式和居中效果。

html{
    font-size: 10px;
    background: url('./架子鼓.jpg')  bottom center;
    background-size: cover;
}

html,body{
    height: 100%;
}

.keys{
    display: flex;
    min-height: 100%;
    align-items: center;    /*垂直居中 */
    justify-content: center; 
}

.key{
    border: 4px solid black;
    border-radius: 5px;
    margin:10px;
    font-size: 15px;
    padding:10px 5px;
    transition: all .7s ease;     /* 过渡动画 */
    width: 100px;
    text-align: center;
    color:white;
    background: rgba(0,0,0,.4);
    text-shadow: 0 0 5px black;    /* 给内容带来立体感 */
}

.key .title{
    font-size: 40px;
}

.sound{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing:1px;
    color: #ffc600;
}

.playing{
    transform: scale(1.1);  /* 变大的感觉 */
    border-color: #ffc600;
    box-shadow: 0 0 5px #ffc600;
}

居中优先选择flex，它算是应用最广泛且最实用的。

交互

const keys = document.querySelectorAll('.key');

for(let i=0;i<keys.length;i++){
    let key = keys[i]
    //key.addEventListener('')
}

const playSound = (event) => {
    const keyCode = event.keyCode;
    //console.log(keyCode);
    const ele = document.querySelector(`.key[data-key="${keyCode}"]`)
    //console.log(ele);
    if(ele){
        var audio;
        switch(keyCode){
        case 65:audio=new Audio('./sounds/boom.wav');
        audio.play(); break;
        case 83:audio=new Audio('./sounds/clap.wav');
        audio.play();break;
        case 68:audio=new Audio('./sounds/hihat.wav');
        audio.play();break;
        case 70:audio=new Audio('./sounds/kick.wav');
        audio.play();break;
        case 71:audio=new Audio('./sounds/openhat.wav');
        audio.play();break;
        case 72:audio=new Audio('./sounds/ride.wav');
        audio.play();break;
        case 74:audio=new Audio('./sounds/snare.wav');
        audio.play();break;
        case 75:audio=new Audio('./sounds/tink.wav');
        audio.play();break;
        case 76:audio=new Audio('./sounds/tom.wav');
        audio.play();break;
        }}
    if(ele){
        ele.classList.add('playing');
        setTimeout(()=>{
            ele.classList.remove('playing');
        },600)
    }
}

window.addEventListener('keyup',playSound);

这里的声音播放我用的是switch，当然肯定有更好的方法，这就由jym自己思考了，其中的keycode在HTML中以及定义好了，可以大幅减少代码量。

总结

简短的代码实现超有成就感的网页，这就是JavaScript的力量，帅气的掘友，开始你的创作吧，成为鼓手就现在

转载自:https://juejin.cn/post/7370002856038957056