按键换色

最新推荐文章于 2020-05-18 15:41:25 发布

zuo_zuo_blog

最新推荐文章于 2020-05-18 15:41:25 发布

阅读量147

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/90199892

版权

JQuery 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>

zuo_zuo_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
按键换色

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap{ width:400px; h...
复制链接

扫一扫