js课程 5-14 js如何实现控制动画角色走动
生活随笔
收集整理的這篇文章主要介紹了
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){}
?
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>?
?
?
?
?
轉載于:https://www.cnblogs.com/Renyi-Fan/p/9304753.html
總結
以上是生活随笔為你收集整理的js课程 5-14 js如何实现控制动画角色走动的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： mac phpstorm 2018 激活
- 下一篇： Java是如何加载资源文件的？（源码解毒