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
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>