javascript-按下键时循环播放功能

2019-10-28 15:37:41 阅读：233 来源： 互联网

标签：onkeypress onkeydown loops html javascript

我正在尝试使用Javascript中的两个键上下移动div.这个想法是,当某个键被按下时,函数会循环并每次添加到div的“ top”样式值中.基本功能有效,但是我无法使其循环播放,也无法响应按键.

在Java中很难找到有关按键处理的信息,似乎大多数人使用jQuery来处理这些信息.

我对do-while循环的使用正确吗？有没有更好的方法来处理keydown和keyup事件？

这是我的代码：

var x = 0;
console.log(x);

function player1MoveDown() {
            var value = document.getElementById("player1").style.top;
            value = value.replace("%", "");
            value = parseInt(value);
            value = value + 1;
            value = value + "%";
            document.getElementById("player1").style.top = value;
            console.log(value);
        }    //moves paddle down; adds to paddle's 'top' style value

function player1MoveSetting() {
    x = 1;
    do {
        setInterval(player1MoveDown(), 3000);
    }   
    while (x == 1);
    console.log(x);
} //paddle moves while x=1; runs player1MoveDown function every 3 seconds

 function player1Stop() {
    x = 0;
 }

这是HTML的相关内容：

< div class =“ paddle” id =“ player1” style =“ top：1％” onkeydown =“ player1MoveSetting()” onkeyup =“ player1Stop()”>< / div>

解决方法:

您不能将keydown事件附加到div,除非它具有tabindex：

<div class="paddle" id="player1" 
     onkeydown="player1MoveSetting()"
     onkeyup="player1Stop()"
     tabindex="1"
>
</div>

您可以替换所有以下代码：

var value = document.getElementById("player1").style.top;
value = value.replace("%", "");
value = parseInt(value);
value = value + 1;
value = value + "%";
document.getElementById("player1").style.top = value;

… 有了这个：

var p1= document.getElementById('player1');
p1.style.top= parseInt(p1.style.top)+1+'%';

这将调用player1MoveDown的返回结果：

setInterval(player1MoveDown(), 3000);

由于player1MoveDown不返回任何内容,因此等效于

setInterval(null, 3000);

要每3秒调用一次函数,请执行以下操作：

setInterval(player1MoveDown, 3000);

这将创建一个无限循环：

x = 1;
do {
  setInterval(player1MoveDown, 3000);
}   
while (x == 1);

即使keyup将全局x设置为0,它也不会运行,因为循环永远不会结束.

而是创建一个计时器变量,该变量在keydown上设置并在keyup上清除.

完整的JavaScript代码

var timer;

function player1MoveDown() {
  var p1= document.getElementById('player1');
  p1.style.top= parseInt(p1.style.top)+1+'%';
  console.log(p1.style.top);
}

function player1MoveSetting() {
  if(timer) return;
  timer= setInterval(player1MoveDown, 100);
}

function player1Stop() {
  clearInterval(timer);
  timer= null;
}

document.getElementById('player1').focus();

Working Fiddle

标签：onkeypress,onkeydown,loops,html,javascript
来源： https://codeday.me/bug/20191028/1953217.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript-按下键时循环播放功能