js之按键控制div移动
生活随笔
收集整理的這篇文章主要介紹了
js之按键控制div移动
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
要求：當(dāng)用戶按下鍵盤上的上下左右鍵時，讓div進(jìn)行上下左右的移動
1.我們要找到事件源和事件 事件源：鍵盤
事件：鍵盤按下事件 document.οnkeydοwn=function(){}
()里填event：是事件對象：包含本次觸發(fā)事件的相關(guān)屬性。方法
2.如何判斷按的是哪個鍵：通過鍵值來判斷
event.keyCode:鍵盤的鍵值
<script>document.onkeydown=function(event){console.log(enent.keyCode)//輸出鍵盤的鍵值 } //按鍵左是37 上是38 右是39 下是40 <script>業(yè)務(wù)：當(dāng)用戶按下鍵盤上下左右鍵時，輸出對應(yīng)方向
1）用if
<scirpt>if(event.keyCode==37){console.log("左") }else if(event.keyCode==38){console.log("上") }else if(event.keyCode==39){console.log("右") }else if(event.keyCode==40){console.log("下") }else{console.log("什么都不是") } </script>2）switch 可以簡化代碼更方便，但只適用于全等判斷
格式：switch（case 值1：執(zhí)行代碼 break；case 值2：執(zhí)行代碼 break... default:執(zhí)行代碼 break）如果只都不符合，走default
<script>switch(event.keyCode){case 37:console.log("左")break;case 38:console.log("上")break;case 39:console.log("右")break;case 40:console.log("下")break;default:console.log("什么都不是")break; } </script>3.給div的格式添加一個相對定位屬性：position:relative;通過left 和top操作
1）如何找到當(dāng)前元素的left值：
將left和top寫到div的行內(nèi)樣式中 定義一個新的變量
var left=div的id值.style.left
因?yàn)閘eft的值本來是0px，所以輸出的也是0px，但是這是一個字符串，進(jìn)行數(shù)值與字符串之間的轉(zhuǎn)化
parseInt()
設(shè)置樣式
代碼
<style>#box{width: 300px;height: 300px; background-color: #ccc; position: relative;}</style> </head> <body><div id="box" style="left: 0px; top: 0px;"></div> <script>var box=document.getElementById("box")document.onkeydown=function(event){switch(event.keyCode){case 38:var top=box.style.topvar x=parseInt(top)var result=x-20box.style.top=result+"px"console.log("上")breakcase 39: //找到當(dāng)前元素的left值var left=box.style.leftvar x=parseInt(left)//console.log(x)var result=x+20box.style.left=result+"px"console.log("右") breakcase 37: var left=parseInt(box.style.left)box.style.left=left-20+"px"console.log("左")breakcase 40:var top=parseInt(box.style.top)box.style.top=top+20+"px"console.log("下")breakdefault: console.log("什么都不是")break}}</script> </body>總結(jié)
以上是生活随笔為你收集整理的js之按键控制div移动的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C# 读取Word文本框中的文本、图片和
- 下一篇： DHCP/Netbios