个人中心
gpt4 book ai didi

javascript - 我有一段代码试图让一个盒子移动，但它不起作用。语言为HTML5，代码如下

转载 作者：行者123 更新时间：2023-11-28 03:32:19 24 4
gpt4 key购买 nike

我无法得到这个来让正方形移动，我没有得到错误，我也不知道为什么。我认为问题出在键盘输入的处理方式或处理方式上。

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
</style>
<body>    

<div id ="container">
<div id ="animate"></div>
</div>

<script>
var pos = 0;
function myMove() {
  var elem = document.getElementById("animate");   
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
    }
  }
}

function myEventHandler(e) {
    var keyCode = e.keyCode;
    if(keyCode == 37) {
        pos = pos - 1
    }
    if(keyCode = 39) {
        pos = pos + 1
    }
}
</script>    
</body>
</html>    
</body>
</html>

最佳答案

您还没有添加 onkeydown 事件监听器，您还没有调用函数来更新元素的位置，实际上不需要 setInterval 函数来执行此操作。 

var pos = 100;
function myMove() {
  var elem = document.getElementById("animate");   
  
    if (pos == 350) {
      clearInterval(id);
    } 
    else {
     
      elem.style.top = pos + 'px'; 
      elem.style.left = pos + 'px'; 
  }
}
function myEventHandler(e){

    var keyCode = e.keyCode;
    if(keyCode == 37){
        pos = pos - 1;
        myMove();
    }
    if(keyCode = 39){
        pos = pos + 1;
        myMove();
        }
}
document.onkeydown = myEventHandler;
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: yellow;
}
#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
}
<div id ="container">
<div id ="animate"></div>
</div>

关于javascript - 我有一段代码试图让一个盒子移动，但它不起作用。语言为HTML5，代码如下，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44666187/

24 4 0
文章推荐： html - AngularJS 编译模型类似于 StackOverflow
文章推荐： javascript - jquery mobile 试图打开同一页面中的所有链接
文章推荐： html - 如何在html中将多个图像上传到服务器
文章推荐： html - 移动端只有 1 个 Div 而不是 100%
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com