jQuery如何使用键盘事件，按住空格键完成进度条效果，并终止键盘事件

jQuery使用键盘事件

keyup：键盘抬起时

keydown：键盘按下时

keypress：键盘按住时

运行下列代码，可以看效果

$(document).keyup(function () {
　　console.log("keyup");
}).keydown(function (e) {
　　console.log(" keydown");
}).keypress(function () {
　　console.log(" keypress");
});

当我们按下键盘时会传一个参数，参数可以调用keycode值

键码对照表

 如何判断我们按下键是哪个keycode值

$(document).keydown(function (event) {
                        
// alert(event.keyCode) //可以弹出我们按键的keycode值
if (event.keyCode == "13") {//按回车键
        alert("ok")
      }
});

一直按住回车键，控制台输出的内容会一直+1

var i=1;
                    $(document).keypress(function (event) {
                        if (event.keyCode == "13") {//按回车键                            
                            i=i+1;
                            console.log(i)
                        }
                    });

完成jQuery键盘事件小项目，当按下左右方向键切换背景颜色

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            div{
                width: 200px;
                height: 200px;
                border-radius: 50%;
                margin-left: 20px;
                float: left;
                border: 1px red solid;                
            }
            #a{
                background-color: red;
                }
        </style>
    </head>
    <body>
        <div id="a">            
        </div>
        <div>            
        </div>        
        <script type="text/javascript">
            
            $(function(){
                $(document).keydown(function (event) {    
                    if (event.keyCode == "37") {
                        // jQuery链式操作，让#a div变红，下一个元素变白
                         $("#a").css("background-color","red").next().css({"background-color":"#fff"});
                    }
                    if (event.keyCode == "39") {
                        $("#a").css({"background-color":"#fff"}).next().css({"background-color":"red"});                        
                    }
                    
                });
            })                    
        </script>
    </body>
</html>

 

 

完成jQuery键盘事件小项目，按一直按住空格键，进度条变化。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            #a{
                height: 10px;
                border: 1px red solid;
                width: 1000px;
            }
            #b{
                width: 10px;
                height: 10px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="a">
            <div id="b">
                
            </div>
        </div>
        <script type="text/javascript">
            var i=10;
            $(document).keypress(function (event) {
                if (event.keyCode == "32") {
                    i+=5;
                    if (i<300) {
                        $("#b").css({"width": i+"px","background-color":"green"})
                    } else if(i<600){
                        $("#b").css({"width": i+"px","background-color":"blue"})
                    }else if(i<900){
                        $("#b").css({"width": i+"px","background-color":"yellow"})
                    }else if(i<=1000){
                        $("#b").css({"width": i+"px","background-color":"red"})                        
                    }else{
                        return false;                        
                    }
                    
                }
            });
            
        </script>
    </body>
</html>

 

posted @ 2020-05-07 16:14  三线码工  阅读(785)  评论(0)  编辑  收藏  举报