按键换色_keycode换颜色-优快云博客

本文介绍了一个使用HTML、CSS和JavaScript实现的功能，通过键盘输入的不同按键，可以改变网页中指定div元素的背景颜色，并实时显示按键的KeyCode。示例中包含了对特定按键（如P、B、O、R、Y）的响应，展示了基本的事件监听和样式更改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .wrap{
            width:400px;
            height:400px;
            margin:100px auto;
        }
        .wrap h1{
            text-align: center;
        }
        .wrap div{
            width:400px;
            height:300px;
            background: pink;
            font-size:30px;
            line-height: 300px;
            text-align: center;
        }
    </style>
    <script src="js/jquery-1.11.1.js"></script>
    <script>
        $(function () {
            var div=$("#bgChange");
            var span=$("#keyCodeSpan");
            $(document).keyup(function (e) {
                //调用方法
                setColor(e.keyCode);
            });

            function setColor(aaa) {
                switch (aaa){
                    case 80:
                        /*  setEle("pink",aaa);*/
                        div.css("background-color","blue");
                        span.text(e.keyCode);
                        break;
                    case 66:
                        setEle("blue",aaa);
                        break;
                    case 79:
                        setEle("orange",aaa);
                        break;
                    case 82:
                        setEle("red",aaa);
                        break;
                    case 89:
                        setEle("yellow",aaa);
                        break;
                    default:
                        alert("系统没有设置此值");
                }
                function setEle(a,b){
                    div.css("background-color",a);
                    span.text(b);
                }
            }


            //1.给document绑定keyup事件
//            $(document).keyup(function (e) {
//                //alert(e.keyCode);
//                //2.获取值，根据此值，给div和span上色和内容
//                switch (e.keyCode){
//                    case 80:
//                        //修改内容pink
//                        div.css("background-color","pink");
//                        span.text(e.keyCode);
//                        break;
//                    case 66:
//                        //修改内容blue
//                        div.css("background-color","blue");
//                        span.text(e.keyCode);
//                        break;
//                    case 79:
//                        //修改内容orange
//                        div.css("background-color","orange");
//                        span.text(e.keyCode);
//                        break;
//                    case 82:
//                        //修改内容red
//                        div.css("background-color","red");
//                        span.text(e.keyCode);
//                        break;
//                    case 89:
//                        //修改内容yellow
//                        div.css("background-color","yellow");
//                        span.text(e.keyCode);
//                        break;
//                    default :
//                        alert("系统没有设置该颜色！");
//                }
//            });
        })
    </script>
</head>
<body>
<div class="wrap">
    <h1>按键改变颜色</h1>
    <div id="bgChange">
        keyCode为：
        <span id="keyCodeSpan">80</span>
    </div>
</div>
</body>
</html>