原生js實現(xiàn)鍵盤控制div移動且解決停頓問題
更新時間：2016年12月05日 08:41:22 投稿：daisy
這篇文章主要給大家介紹了如何利用原生js實現(xiàn)鍵盤控制div移動，并且解決在移動過程中的停頓問題，文中給出了詳細的示例代碼，相信對大家的理解和學習很有幫助，下面跟著小編一起來看看吧。
首先說明下為什么會停頓？
效果 ：用鍵盤控制一個div移動
當按下一個方向鍵不放，div會先停頓一下，然后才開始持續(xù)移動。
原因：系統(tǒng)要區(qū)分用戶是否連續(xù)輸入，第一個到第二個之間有一個停頓時間
注：了解原因才能解決問題
效果展示
1.簡單控制，但是有停頓
2.簡單控制，解決停頓
解決方法
方法 ：先開一個定時器，讓div一直處于（往4個方向）準備移動的狀態(tài)
初始4個方向的值都是false，div就保持在原地不動。
按下某個方向鍵，這個方向的值就改變?yōu)閠rue，div就會開始往這個方向移動。
松開方向鍵，這個方向的值就改變?yōu)閒alse , div就停止這個方向移動了。
基本移動，但是有挺頓的代碼
<html>
<head>
<title>鍵盤控制div移動，會有停頓</title>
<meta charset="utf-8" />
<style type="text/css">
#div1{
width:100px;
height:100px;
background:greenyellow;
position:absolute;}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
document.onkeydown = function(ev){
var ev = ev || event;
var keyCode = ev.keyCode;
switch(keyCode){
case 37: oDiv.style.left = oDiv.offsetLeft-10+"px";break;
case 38: oDiv.style.top = oDiv.offsetTop-10+"px";break;
case 39: oDiv.style.left = oDiv.offsetLeft+10+"px";break;
case 40: oDiv.style.top = oDiv.offsetTop+10+"px";break;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html
控制移動，解決停頓的問題
<html>
<head>
<title>鍵盤控制div移動并且解決停頓問題</title>
<meta charset="utf-8" />
<style type="text/css">
/*設置div樣式*/
div{
width:100px;
height:100px;
background: #68affc;
position:absolute;
left:100px;
top:100px;
}
</style>
<script>
//當頁面加載完后
window.onload = function(){
//獲取Div元素
var oDiv = document.getElementById("div1");
//創(chuàng)建各個方向條件判斷初始變量
var left = false;
var right = false;
var top = false;
var bottom = false;
//當按下對應方向鍵時，對應變量為true
document.onkeydown = function(ev){
var oEvent = ev || event;
var keyCode = oEvent.keyCode;
switch(keyCode){
case 37:
left=true;
break;
case 38:
top=true;
break;
case 39:
right=true;
break;
case 40:
bottom=true;
break;
}
};
//設置一個定時，時間為50左右，不要太高也不要太低
setInterval(function(){
//當其中一個條件為true時，則執(zhí)行當前函數(shù)（移動對應方向）
if(left){
oDiv.style.left = oDiv.offsetLeft-10+"px";
}else if(top){
oDiv.style.top = oDiv.offsetTop-10+"px";
}else if(right){
oDiv.style.left = oDiv.offsetLeft+10+"px";
}else if(bottom){
oDiv.style.top = oDiv.offsetTop+10+"px";
}
},50);
//執(zhí)行完后，所有對應變量恢復為false，保持靜止不動
document.onkeyup = function(ev){
var oEvent = ev || event;
var keyCode = oEvent.keyCode;
switch(keyCode){
case 37:
left=false;
break;
case 38:
top=false;
break;
case 39:
right=false;
break;
case 40:
bottom=false;
break;
}
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的工作或者學習能帶來一定的幫助，如果有疑問大家可以留言交流。
相關文章
js實現(xiàn)在字符串中提取數(shù)字。需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
KnockoutJS 3.X API 第四章之事件event綁定
event綁定即為事件綁定，即當觸發(fā)相關DOM事件的時候回調(diào)函數(shù),這篇文章主要介紹了KnockoutJS 3.X API 第四章之事件event綁定的相關知識，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了Bootstrap 3 進度條的實現(xiàn),非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-02-02
JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)
這篇文章主要介紹了JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能防止刷新倒計時失效問題，在項目開發(fā)中經(jīng)常會用到此功能，下面小編通過本文給大家分享JS實現(xiàn)發(fā)送短信驗證后按鈕倒計時功能(防止刷新倒計時失效)，需要的朋友參考下吧2017-07-07
Next.js 是一個輕量級的 React 服務端渲染應用框架。文中通過示例代碼介紹的非常詳細，需要的朋友們下面隨著小編來一起學習學習吧2021-07-07
本篇文章主要介紹了微信小程序開發(fā)經(jīng)驗總結（推薦），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
下面小編就為大家?guī)硪黄獪\談js中的延遲執(zhí)行和定時執(zhí)行。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
這篇文章主要教大家如何簡單實現(xiàn)js懸浮導航效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
微信小程序獲取用戶信息的兩種方法wx.getUserInfo與open-data實例分析
這篇文章主要介紹了微信小程序獲取用戶信息的兩種方法wx.getUserInfo與open-data,結合實例形式分析了wx.getUserInfo與open-data獲取用戶信息的相關操作技巧與使用注意事項,需要的朋友可以參考下2019-05-05
這篇文章主要為大家詳細介紹了JS組件Bootstrap Table分頁使用方法，具有一定的實用性，感興趣的小伙伴們可以參考一下2016-05-05