Javascript动画问题

Javascript Animation trouble

本文关键字：问题 动画 Javascript      更新时间：2023-09-26

我的代码是一个网站，当你按下移动按钮，两个方块将移动，如果你按下改变颜色按钮，两个方块将交替的颜色。这些形状同时做这些动作。然而，只有一个方块这样做，而另一个什么也不做……请帮忙吗?

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: CadetBlue;
}
div#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: Maroon;
}
</style>
<style>
#containertwo {
  width: 400px;
  height: 400px;
  position: relative;
  background: CadetBlue;
}
div#animatetwo {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 350px;
  top: 0px;
  background-color: Olive;
}
</style>
<body>
<p>
<button onClick="myMove()">Movement</button>
</p>
<p>
<button onClick="button_click()">Change Colour</button>
</p>
<div id ="container">
<div id ="animate"></div>
<div id ="animatetwo"></div>
</div>

<div id="box" onClick="button_click();"></div>
<script>
var colors = ["Maroon","Olive"];
function button_click() {
    var box = document.getElementById("animate");
    var background_color = box.style.backgroundColor;
    var i = colors.indexOf(background_color);
    if (i === colors.length-1) {
        i = -1;
    }
    animate.style.backgroundColor = colors[i+1];
}
</script>
<div id="box" onClick="myMove();"></div>
<script>
function myMove() {
  var elem = document.getElementById("animate");
  var pos = 0;
  var id = setInterval(frame, 1);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}
</script>
<div id="box" onClick="button_click();"></div>
<script>
var colorstwo = ["Maroon","Olive"];
function button_clicktwo() {
    var box = document.getElementById("animatetwo");
    var background_color = box.style.backgroundColor;
    var i = colorstwo.indexOf(background_color);
    if (i === colorstwo.length-1) {
        i = -1;
    }
    animatetwo.style.backgroundColor = colorstwo[i+1];
}
</script>

<div id="box" onClick="myMove();"></div>
<script>
function myMovetwo() {
  var elem = document.getElementById("animatetwo");
  var pos = 0;
  var id = setInterval(frame, 1);
  function frame() {
    if (pos == 350) {
      clearInterval(id);
    } else {
      pos++;
      elem.style.top = pos + 'px';
      elem.style.left = pos + 'px';
    }
  }
}
</script>
</body>
</html>

Ok…我先谈谈你遇到的问题，然后再给你一些建议。

1)首先，点击"移动"按钮，你只调用myMove()函数，它只负责移动animateddiv，当你选择它: 
var elem = document.getElementById("animate");

所以如果你想同时移动两个，确保你激活了正确的函数，因为我想象你想同时调用myMovetwo()也许你可以这样做:

function move() {
  myMove();
  myMovetwo();
}

这样调用move()，两个调用都将运行。

2)现在关于你的代码，你应该真正考虑隔离页面的不同方面，我的意思是隔离CSS, HTML和JavaScript，你可以使用<link>标签导入你的样式和<script src="path"></script>标签来包含你的JavaScript代码。

另一个建议是从你的html标签中删除onclick，并从javascript代码中获得点击事件。

有一些很好的资源来学习这些基本概念，也许codecademy对初学者来说是一个很好的资源https://www.codecademy.com/courses/html-javascript-css/0/1

干杯!

相关文章：