孙肖宁

按键变色
描述:通过判断按的键盘上的那个按键,来控制颜色,并且把按键的编码显示出来。如果没有则提示没有。jQuery的版本是...
扫描右侧二维码阅读全文
13
2018/05

按键变色

描述:通过判断按的键盘上的那个按键,来控制颜色,并且把按键的编码显示出来。如果没有则提示没有。jQuery的版本是1.8.
示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>按键变色</title>
    <style>
        .wrap {
            width: 400px;
            height: 400px;
            margin: 100px auto 0;
        }

        .wrap h1 {
            text-align: center;
        }

        .wrap div {
            width: 400px;
            height: 300px;
            background: pink;
            font-size: 30px;
            text-align: center;
            line-height: 300px;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function () {
            var div = $("#bgChange");
            var span = $("#keyCodeSpan");

            $(document).keyup(function (e) {
                setColor(e.keyCode);
            });
            //接受按键并调用颜色和数值的函数
            function setColor(e) {
                switch (e) {
                    case 80:
                        setEle("pink", e);
                        break;
                    case 66:
                        setEle("blue", e);
                        break;
                    case 79:
                        setEle("orange", e);
                        break;
                    case 82:
                        setEle("red", e);
                        break;
                    case 89:
                        setEle("yellow", e);
                        break;
                    default :
                        alert("系统没有设置该颜色!");
                }
                //颜色和数值的函数
                function setEle(a, b) {
                    div.css("background-color", a);
                    span.text(b);
                }
            }
        });


    </script>
</head>
<body>
    <div class="wrap">
        <h1>按键改变颜色</h1>
        <div id="bgChange">
            keyCode为:
            <span id="keyCodeSpan">80</span>
        </div>
    </div>
</body>
</html>
Last modification:May 13th, 2018 at 05:22 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment