微信扫一扫打赏支持

js课程 5-14 js如何实现控制动画角色走动

js课程 5-14 js如何实现控制动画角色走动

一、总结

一句话总结：首先是onkeydown事件，然后是改变元素的left和top属性

 

1、常用键盘事件有哪些？

• onkeydown和 onkeyup，onkeypress用的很少

 

2、js如何实现按上下左右页面中的图片也跟着变化？

首先是onkeydown事件，然后是改变元素的left和top属性

 

3、js中的事件触发的两种方式？

在标签内，比如onclick=""
在script中，document.onkeydown=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、相关知识

 js特效:
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>

 

 

 

 

 

 
posted @ 2018-07-13 14:30  范仁义  阅读(974)  评论(0)  编辑  收藏  举报