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>

jQuery如何使用键盘事件，按住空格键完成进度条效果，并终止键盘事件的更多相关文章

  1. 创建一个jQuery UI的垂直进度条效果

    日期:2013-9-24  来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...

  2. 【jQuery】页面顶部显示的进度条效果

    <!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...

  3. JQuery实战——页面进度条效果

    今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...

  4. html5 vedio 播放器，禁掉进度条快进快退事件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. js监听事件 上滑消失下滑出现的效果 触摸与手势事件

    https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...

  6. jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟

    在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...

  7. jQuery实现上传进度条效果

    效果:(点击上传按钮) See the Pen pjGNJr by moyu (@MoYu1991) on CodePen. html代码:   <!DOCTYPE html> <h ...

  8. idhttp post 上传或下载时显示进度条（对接idhttp1.OnWork事件）

    通过 idhttp 带进度条上传演示一下,下载和上传原理差不多,说明一下下面例子中的的idhttp 是动态创建的 第一步:添加一个StatusBar或者gauge 进度条,这2个都可以.我用的是 st ...

  9. JS框架_(JQuery.js)上传进度条

    百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

  1. AJ学IOS 之CoreLocation反地理编码小Demo输入经纬度得到城市

    AJ分享,必须精品 一:效果 输入经纬度,可以得到相应的地名 二:思路 跟地里编码差不多 1.获取用户输入的经纬度 2.根据用户输入的经纬度创建CLLocation对象 3.根据CLLocation对 ...

  2. 安装python3.8和python2.7

    在同一台电脑上同时安装Python2和Python3 目前Python的两个版本Python2和Python3同时存在,且这两个版本同时在更新与维护. 到底是选择Python2还是选择Python3, ...

  3. 手把手教Extjs-简单GridField示例讲解二

    使用的Extjs版本为4.2,示例是官方的版本,对里面的语法进行一句一句的学习研究.可以方便他人,又可以提升自己的理解.里面存在的问题,后期会一步一步改进.也欢迎各位指出. /* Extjs具有很庞大 ...

  4. 怎么在执行Python脚本时，密码等敏感信息也不让它出现

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http ...

  5. 一篇文章快速搞懂Redis的慢查询分析

    什么是慢查询? 慢查询,顾名思义就是比较慢的查询,但是究竟是哪里慢呢?首先,我们了解一下Redis命令执行的整个过程: 发送命令 命令排队 命令执行 返回结果 在慢查询的定义中,统计比较慢的时间段指的 ...

  6. E. Max Gcd

    单点时限: 2.0 sec 内存限制: 512 MB 一个数组a,现在你需要删除某一项使得它们的gcd最大,求出这个最大值. 输入格式 第一行输入一个正整数n,表示数组的大小,接下来一行n个数,第i个 ...

  7. 学习JVM参数前必须了解的

    JVM参数是什么 大家照相通常使用手机就够用了,但是针对发烧友来说会使用更专业的设备,比如单反相机,在单反里有好几个模式,P/A/S/M,其中P是傻瓜模式,程序会自动根据环境设置快门速度和光圈大小,以 ...

  8. powershell提示无法将“”项识别

    解决: 完成! 解释: 权限问题.Powershell脚本的4种执行权限介绍,Windows默认不允许任何脚本运行,我们可以使用"Set-ExecutionPolicy"cmdle ...

  9. IDEA惊天bug：进程已结束,退出代码-1073741819 (0xC0000005)

    由于昨天要写的文章没有写完,于是今天早上我四点半就"自然醒"了,心里面有事,睡觉也不安稳.洗漱完毕后,我打开电脑,正襟危坐,摆出一副要干架的态势,不能再拖了. 要写的文章中涉及到一 ...

  10. golang 基础 map及工厂函数

    Map是一种数据结构,是一个集合,用于存储一系列无序的键值对.它基于键存储的,键就像一个索引一样,这也是Map强大的地方,可以快速快速检索数据,键指向与该键关联的值. 内部实现 Map是基于 散列表 ...