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>
jQuery如何使用键盘事件,按住空格键完成进度条效果,并终止键盘事件的更多相关文章
- 创建一个jQuery UI的垂直进度条效果
日期:2013-9-24 来源:GBin1.com 在线演示 缺省的jQuery UI只有水平的进度条效果,没有垂直的进度条效果,仅仅重新定义JQuery UI的CSS不能解决这个问题. 这里我们扩 ...
- 【jQuery】页面顶部显示的进度条效果
<!Doctype html> <html> <head> <title>页面顶部显示的进度条效果</title> <meta htt ...
- JQuery实战——页面进度条效果
今早逛阮一峰大神的博客 ECMAScript 6 入门 时候看到页面顶部有个进度条显示当前浏览的进度,如图: 顶部进度条会根据当前页面高度进行宽度调整,实战一番,视觉使用animated方法实现.下面 ...
- html5 vedio 播放器,禁掉进度条快进快退事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js监听事件 上滑消失下滑出现的效果 触摸与手势事件
https://www.w3cmm.com/javascript/touch.html //触摸与手势事件连接tinyscrollbar //方法1var _this = $('#fabu');var ...
- jquery ajax php 无刷新上传文件 带 遮罩 进度条 效果的哟
在很多项目中都会叫用户上传东西这些的,自从接触了jquery 和ajax之后就不管做什么,首先都会想到这个,我这个人呢?是比较重视客户体验的,这次我这边负责的是后台板块,然后就有一块是要求用户上传照片 ...
- jQuery实现上传进度条效果
效果:(点击上传按钮) See the Pen pjGNJr by moyu (@MoYu1991) on CodePen. html代码: <!DOCTYPE html> <h ...
- idhttp post 上传或下载时显示进度条(对接idhttp1.OnWork事件)
通过 idhttp 带进度条上传演示一下,下载和上传原理差不多,说明一下下面例子中的的idhttp 是动态创建的 第一步:添加一个StatusBar或者gauge 进度条,这2个都可以.我用的是 st ...
- JS框架_(JQuery.js)上传进度条
百度云盘 传送门 密码: 1pou 纯CSS上传进度条效果: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...
随机推荐
- conda命令详解
显示已有环境信息 conda info --envs 创建环境 conda create --name [环境名] python=[版本号] 删除环境 conda remove --name [环境名 ...
- sqli-labs通关----11~20关
第十一关 从第十一关开始,就开始用post来提交数据了,我们每关的目的都是获取users表下password字段的内容. post是一种数据提交方式,它主要是指数据从客户端提交到服务器端,例如,我们常 ...
- Map使用foreach遍历方式,Map获取第一个键值
List<Map<String, Object>> mapList = new ArrayList<>(); for (Map.Entry<String,O ...
- unity使用Animator做一个简单的动画
1.在unity的物体上添加Animator组件 2.在Project下的Assets下添加Animator Controller 3.在Animator Controller添加动作 4.在动作之间 ...
- 一站式WebAPI与认证授权服务
保护WEBAPI有哪些方法? 微软官方文档推荐了好几个: Azure Active Directory Azure Active Directory B2C (Azure AD B2C)] Ident ...
- 如何用python无账号无限制获取企查查信息
前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. PS:如有需要Python学习资料的小伙伴可以加点击下方链接自行获取http ...
- shiro:自定义remle(二)
SpringMVC+SpringMVC+Mybatis项目 1:导入相关依赖 <dependencies> <!--测试依赖--> <dependency> < ...
- Springboot:员工管理之删除员工及退出登录(十(9))
springboot2.2.6 delete请求报错,降至2.1.11功能可用 原因未知 构建员工删除请求 com\springboot\controller\EmployeeController.j ...
- C# 序列化之二进制
序列化:又称串行化,是.NET运行时环境用来支持用户定义类型的流化的机制.其目的是以某种存储形成使自定义对象持久化,或者将这种对象从一个地方传输到另一个地方. 一般有三种方式:1.是使用BinaryF ...
- Java IO 流 -- 设计模式:装饰设计模式
在java IO 流中我们经常看到这样的写法: ObjectOutputStream oos = new ObjectOutputStream( new BufferedOutputStream(ne ...