js课程 5-14 js如何实现控制动画角色走动
js课程 5-14 js如何实现控制动画角色走动
一、总结
一句话总结：首先是onkeydown事件，然后是改变元素的left和top属性
1、常用键盘事件有哪些？
• onkeydown和 onkeyup，onkeypress用的很少
2、js如何实现按上下左右页面中的图片也跟着变化？
首先是onkeydown事件，然后是改变元素的left和top属性
3、js中的事件触发的两种方式？
在标签内，比如οnclick=""
在script中，document.οnkeydοwn=function(event){}
26 document.onkeydown=function(event){
4、如何让一个文本框里面只能输入大写或者小写（比如验证码框）（用键盘事件）？
用onkeyup函数，比如只能输入大写，首先获取文本内容，然后全部用toUpperCase函数转成大写
23 <script>
24 vobj=document.getElementById('verify'); 25 26 vobj.onkeyup=function(){ 27 val=this.value; 28 val2=val.toUpperCase(); 29 this.value=val2; 30 } 31 </script>
二、js如何实现控制动画角色走动
1、相关知识
1.触发事件
2.属性改变
3.样式改变
绑定事件:
1.标签身上
2.js代码中
鼠标事件:
• onclick
• ondblclick
• onmouseenter
• onmouseleave
• onmousemove
实例:循环单击!
键盘事件:
• onkeydown
• onkeyup
• onkeypress
2、代码
onkeyup键盘弹起事件
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 *{ 8 font-family: 微软雅黑;
9 }
10 </style>
11 </head>
12 <body>
13 <form action="">
14 <p>用户名:</p>
15 <p><input type="text"></p>
16 <p>密码:</p>
17 <p><input type="text"></p>
18 <p>验证码:</p>
19 <p><input type="text" id='verify'></p>
20 <p><input type="submit" value="Ok"></p>
21 </form>
22 </body>
23 <script>
24 vobj=document.getElementById('verify');
25
26 vobj.onkeyup=function(){
27 val=this.value;
28 val2=val.toUpperCase();
29 this.value=val2;
30 }
31 </script>
32 </html>onkeydown键盘按下事件
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>index</title>
6 <style>
7 img{ 8 cursor:pointer;
9 position: absolute;
10 top:0px;
11 left:0px;
12 }
13 </style>
14 </head>
15 <body>
16 <img src="a.png" id="imgid">
17 </body>
18 <script>
19 imgobj=document.getElementById('imgid');
20
21 xs=0;
22 xv=30;
23
24 ys=0;
25 yv=30;
26 document.onkeydown=function(event){
27 kc=event.keyCode;
28 document.title=kc;
29
30 switch(kc){
31 case 37:
32 xs-=xv;
33 imgobj.style.left=xs+'px';
34 document.body.style.background='#f00';
35 break;
36 case 38:
37 ys-=yv;
38 imgobj.style.top=ys+'px';
39 document.body.style.background='#0f0';
40 break;
41 case 39:
42 xs+=xv;
43 imgobj.style.left=xs+'px';
44 document.body.style.background='#00f';
45 break;
46 case 40:
47 ys+=yv;
48 imgobj.style.top=ys+'px';
49 document.body.style.background='#f0f';
50 break;
51 }
52 }
53 </script>
54 </html>转载于:https://www.cnblogs.com/Renyi-Fan/p/9304753.html
js课程 5-14 js如何实现控制动画角色走动相关推荐
- 视频教程-零基础JS入门系列课程(2)之JS语法基础精讲-JavaScript
零基础JS入门系列课程(2)之JS语法基础精讲 螺钉课堂讲师,擅长Vue.React.ReactNative.NodeJS等前端框架及技术 邓老师 ¥59.00 立即订阅 扫码下载「CSDN程序员学院 ...
- node.js学习笔记14—微型社交网站
node.js学习笔记14-微型社交网站 1.功能分析 微博是以用户为中心,因此需要有注册和登录功能. 微博最核心的功能是信息的发表,这个功能包括许多方面,包括:数据库访问,前端显示等. 一个完整的微 ...
- JS课程分享（1.初始JavaScript）
JS课程分享 JavaScript JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言(script 是脚本的意思) 脚本语言:不需要编译,运行过程中有JS 解释器(js 引 ...
- 【 js基础 Day2】js的流程控制:分支语句,循环.顺序结构
复习 JavaScript简称为JS JavaScript是什么? 是一门脚本语言:不需要编译,直接运行 是一门解释性的语言:遇到一样代码就解释一行代码 C#语言是一门面向对象的语言,也是编译语言,是 ...
- node JS獲取GPS_Node.js 14 正式发布：V8 引擎升级，新增异步本地存储 API
Node.js 14 版本于近日正式发布, 此版本包含的亮点如下: 对诊断功能的改进 升级 v8 引擎 新增实验性的异步本地存储 API 强化流 API 移除实验性模块中的警告 移除一部分早期版本中废 ...
- Three.js中引入dat.gui库实现界面组件控制动画速度变量
场景 Three.js中使用requestAnimationFrame方法实现立方体转动和小球跳动的动画: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/arti ...
- 星期三，今天早上上了四节JS课程，下午听健康讲座，晚上装系统
星期三,今天早上上了四节JS课程,下午听健康讲座,晚上装系统.我想说装系统是最浪费时间的,以前大一的时候,有一段时间喜欢上装系统,我去有时候一个系统装了两三天,因为有很多问题. ~ 后面就不研究了,昨 ...
- js进阶正则表达式14验证邮编（input的pattern属性）（正则表达式加起^始$）
js进阶正则表达式14验证邮编(input的pattern属性)(正则表达式加起^始$) 一.总结 1.input的pattern属性:里面可以直接放正则表达式,<input type=&quo ...
- 【SSH框架/国际物流商综平台】-05 单点登录 用户-角色-权限分配 Ztree.js structs2.0 异常框架 细粒度权限控制 BaseEntitity中createby degree
回顾 Shiro安全框架 认证,授权,加密,会话管理(单点登录),缓存,与web集成 单点登录(SSO Single Sign on)的原理 就是将原有的各个系统的会话管理机制,抽取出来交给第三方集中 ...
最新文章
- 集体智慧及其常用算法
- python虚拟环境安装pyqt5_python虚拟环境安装pyqt5
- 【DIY】手把手教你 DIY 最便宜的 arduino 温湿度计图文
- 计算机常考应用分析题,计算机常见故障及排除
- 六、Hbase的构架，安装和基本使用
- hdu 1421 动态规划
- 地牢房间迷宫走廊生成（二），Python实现洪水法、完美迷宫
- RAID阵列及常用RAID
- ansible-playbook Roles include
- 周立功USBCAN-2E-U的驱动安装及上位机安装
- 订餐系统java+mybatis+mysql8项目练习(二) 添加订单项
- 在Xubuntu上安装中文输入法
- ehvierwer登录与不登录_微信上不去了怎么办，峰哥教你微信登录不上去的办法
- 配置babel-plugin-import报错的深坑
- photoshop批处理改变图片大小
- excel单元格斜线_最实用的8个Excel操作技巧，1分钟学会！
- C语言飞机大战程序思路,C语言代码实现飞机大战
- 聚焦计算机视觉前沿，蚂蚁技术研究院4篇论文入选顶会NeurIPS
- HTML之表格，表单的使用
- 三十八、SAP设置默认语言