按鍵變色（event）

<!DOCTYPE html>
<html>

<head lang="en">
    <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-1.11.1.js"></script>
    <script>
        $(function () {
            //需求：在頁(yè)面上，按鍵.是哪個(gè)顏色的首寫(xiě)字母div就改變?yōu)樵擃伾?，然后span內(nèi)容賦值。
            //步驟：
            //1.給document綁定keyup事件
            //2.獲取值，根據(jù)此值，給div和span上色和內(nèi)容

            var div = $("#bgChange");
            var span = $("#keyCodeSpan");

            //綁定事件
            $(document).keyup(function (e) {
                //調(diào)用方法
                setColor(e.keyCode);
            });


            function setColor(aaa){
                //alert(e.keyCode);
                //2.獲取值，根據(jù)此值，給div和span上色和內(nèi)容
                switch (aaa){
                    case 80:
                        //修改內(nèi)容pink
                        setEle("pink",aaa);
                        break;
                    case 66:
                        //修改內(nèi)容blue
                        setEle("blue",aaa);
                        break;
                    case 79:
                        //修改內(nèi)容orange
                        setEle("orange",aaa);
                        break;
                    case 82:
                        //修改內(nèi)容red
                        setEle("red",aaa);
                        break;
                    case 89:
                        //修改內(nèi)容yellow
                        setEle("yellow",aaa);
                        break;
                    default :
                        alert("系統(tǒng)沒(méi)有設(shè)置該顏色！");
                }

                function setEle(a,b){
                    div.css("background-color",a);
                    span.text(b);
                }

            }

            //1.給document綁定keyup事件
//            $(document).keyup(function (e) {
//                //alert(e.keyCode);
//                //2.獲取值，根據(jù)此值，給div和span上色和內(nèi)容
//                switch (e.keyCode){
//                    case 80:
//                        //修改內(nèi)容pink
//                        div.css("background-color","pink");
//                        span.text(e.keyCode);
//                        break;
//                    case 66:
//                        //修改內(nèi)容blue
//                        div.css("background-color","blue");
//                        span.text(e.keyCode);
//                        break;
//                    case 79:
//                        //修改內(nèi)容orange
//                        div.css("background-color","orange");
//                        span.text(e.keyCode);
//                        break;
//                    case 82:
//                        //修改內(nèi)容red
//                        div.css("background-color","red");
//                        span.text(e.keyCode);
//                        break;
//                    case 89:
//                        //修改內(nèi)容yellow
//                        div.css("background-color","yellow");
//                        span.text(e.keyCode);
//                        break;
//                    default :
//                        alert("系統(tǒng)沒(méi)有設(shè)置該顏色！");
//                }
//            });
        })
    </script>
</head>

<body>

    <div class="wrap">
        <h1>按鍵改變顏色</h1>
        <div id="bgChange">
            keyCode為：
            <span id="keyCodeSpan">80</span>
        </div>
    </div>

</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容