利用html+css+js完成键盘的还原以及主题切换

最新推荐文章于 2024-04-22 15:55:02 发布

Weirdo023

最新推荐文章于 2024-04-22 15:55:02 发布

阅读量120

点赞数

文章标签： html css javascript

本文链接：https://blog.csdn.net/Weirdo023/article/details/133296007

版权

写法可能不是最简便的，但是效果是可以实现的，代码如下：

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" type="text/css" href="./键盘.css">
</head>
<body>
    <br />
    <!--  键盘盒子部分-->
    <div class="bigBox">
        <!-- 左边部分 -->
        <div class="big_box_left">
            <!-- 顶部第一排盒子 -->
            <div class="left_box">
                <div class="shadow_color">ESC</div>
                <div class="shadow_color" style="margin-left: 40px;">F1</div>
                <div class="shadow_color">F2</div>
                <div class="shadow_color">F3</div>
                <div class="shadow_color">F4</div>
                <div class="shadow_color" style="margin-left: 25px;">F5</div>
                <div class="shadow_color">F6</div>
                <div class="shadow_color">F7</div>
                <div class="shadow_color">F8</div>
                <div class="shadow_color" style="margin-left: 30px;">F9</div>
                <div class="shadow_color">F10</div>
                <div class="shadow_color">F11</div>
                <div class="shadow_color">F12</div>
            </div>
            <!-- 第二排 -->
            <div class="left_box">
                <div class="shadow_color">~</div>
                <div class="shadow_color">1</div>
                <div class="shadow_color">2</div>
                <div class="shadow_color">3</div>
                <div class="shadow_color">4</div>
                <div class="shadow_color">5</div>
                <div class="shadow_color">6</div>
                <div class="shadow_color">7</div>
                <div class="shadow_color">8</div>
                <div class="shadow_color">9</div>
                <div class="shadow_color">0</div>
                <div class="shadow_color">-</div>
                <div class="shadow_color">=</div>
                <div class="shadow_color" style="width: 74px;"> ← </div>
            </div>
            <!-- 第三排 -->
            <div class="left_box">
                <div class="shadow_color" style="width: 50px;">TAB</div>
                <div class="shadow_color">Q</div>
                <div class="shadow_color">W</div>
                <div class="shadow_color">E</div>
                <div class="shadow_color">R</div>
                <div class="shadow_color">T</div>
                <div class="shadow_color">Y</div>
                <div class="shadow_color">U</div>
                <div class="shadow_color">I</div>
                <div class="shadow_color">O</div>
                <div class="shadow_color">P</div>
                <div class="shadow_color">[</div>
                <div class="shadow_color">]</div>
                <div class="shadow_color" style="width: 65px;">\</div>
            </div>
            <!-- 第四排 -->
            <div class="left_box">
                <div class="shadow_color" style="width: 75px;">CAPS</div>
                <div class="shadow_color">A</div>
                <div class="shadow_color">S</div>
                <div class="shadow_color">D</div>
                <div class="shadow_color">F</div>
                <div class="shadow_color">G</div>
                <div class="shadow_color">H</div>
                <div class="shadow_color">J</div>
                <div class="shadow_color">K</div>
                <div class="shadow_color">L</div>
                <div class="shadow_color">;</div>
                <div class="shadow_color">'</div>
                <div class="shadow_color" style="width: 85px;">ENTER</div>
            </div>
            <!-- 第五排 -->
            <div class="left_box">
                <div class="shadow_color" style="width: 90px;">SHIFI</div>
                <div class="shadow_color">Z</div>
                <div class="shadow_color">X</div>
                <div class="shadow_color">C</div>
                <div class="shadow_color">V</div>
                <div class="shadow_color">B</div>
                <div class="shadow_color">N</div>
                <div class="shadow_color">M</div>
                <div class="shadow_color">,</div>
                <div class="shadow_color">.</div>
                <div class="shadow_color">/</div>
                <div class="shadow_color" style="width: 114px;">SHIFT</div>
            </div>
            <!-- 第六排 -->
            <div class="left_box">
                <div class="shadow_color" style="width: 47px;">CTRL</div>
                <div class="shadow_color" style="width: 47px;">WIN</div>
                <div class="shadow_color" style="width: 47px;">ALT</div>
                <div class="shadow_color" style="width: 280px;">Space</div>
                <div class="shadow_color" style="width: 47px;">ALT</div>
                <div class="shadow_color" style="width: 47px;">FN</div>
                <div class="shadow_color" style="width: 47px;">MENU</div>
                <div class="shadow_color" style="width: 60px;">CTRL</div>
            </div>
        </div>
        <!-- 右边部分 -->
        <div class="big_box_right">
            <!-- 右边第一排盒子 -->
            <div class="right_box">
                <div class="shadow_color">PRTSC</div>
                <div class="shadow_color">SCRLK</div>
                <div class="shadow_color">PAUSE</div>
            </div>
            <div class="right_box">
                <div class="shadow_color">INS</div>
                <div class="shadow_color">HOME</div>
                <div class="shadow_color">PgUP</div>
            </div>
            <div class="right_box">
                <div class="shadow_color">DEL</div>
                <div class="shadow_color">END</div>
                <div class="shadow_color">PgDN</div>
            </div>
            <div class="right_box"></div>
            <div class="right_box">
                <div class="shadow_color">↑</div>
            </div>
            <div class="right_box">
                <div class="shadow_color">←</div>
                <div class="shadow_color">↓</div>
                <div class="shadow_color">→</div>
            </div>
        </div>
    </div>

    <!-- 主题更换部分 -->
    <div class="theme">
        <div class="theme_box">黑色主题</div>
        <div class="theme_box">白色主题</div>
    </div>
</body>
</html>

CSS部分:

body {
    background-color: white;
    margin: 0;
    padding: 0;
}

.bigBox {
    width: 865px;
    height: 315px;
    background-color: #3A3A3A;
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.4);
    transition: .4s ease;
}

.big_box_left {
    width: 79%;
    height: 96%;
    margin-left: 6px;
}

.big_box_right {
    width: 18%;
    height: 96%;
    margin-right: 6px;
}

.left_box {
    width: 100%;
    height: 16%;
    display: flex;
    align-items: center;
    /* justify-content: center; */
}

.left_box div {
    width: 40px;
    height: 90%;
}
.right_box{
    width: 100%;
    height: 16%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.shadow_color{
    background-color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    border-radius: 5px;
    color: #E4D65A;
    box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.4)  3px 3px 8px 2px rgba(0, 0, 0, 0.4);
    transition: 1s ease;
    font-size: 12px;
} 
.shadow_color:hover{
    cursor: pointer;
}
.right_box div{
    width: 40px;
    height: 90%;
}

.theme {
    width: 500px;
    height: 100px;
    margin: 30px auto;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}

.theme_box {
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    background-color: white;
    box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.theme_box:hover {
    cursor: pointer;
}
.shadow_color2 {
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
    border-radius: 5px;
    color: black;
    box-shadow: 3px 3px 8px 2px rgba(0, 0, 0, 0.4) ;
    font-size: 12px;
    transition: .3s ease;
   
}
.shadow_color2:hover{
    cursor: pointer;
    box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.4) ;
}
.bigBox2{
    width: 865px;
    height: 315px;
    background-color: white;
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 10px;
    box-shadow: 0 0 20px 10px rgba(0, 0, 0, 0.4);
    transition: .3s ease;
}

Script部分:

    var but = document.querySelectorAll(".theme_box")
    var bigbox = document.querySelector(".bigBox")
    var shadow = document.querySelectorAll(".shadow_color")
    var themeOptions = {
        '白色主题': {
            'boxClass': 'bigBox2',
            'shadowClass': 'shadow_color2'
        },
        '黑色主题': {
            'boxClass': 'bigBox',
            'shadowClass': 'shadow_color'
        }
    };

    but.forEach(item => {
        item.addEventListener("click", function (e) {
            var color = e.target.textContent;
            var selectedTheme = themeOptions[color];

            if (selectedTheme) {
                bigbox.className = selectedTheme['boxClass'];
                shadow.forEach(items => {
                    items.classList.remove('shadow_color', 'shadow_color2');
                    items.classList.add(selectedTheme['shadowClass']);
                });
            }
        });
    });