Question

我的代码适用于一个网站，当你按下移动按钮时，两个方格会移动，如果你按下更改颜色按钮，两个方格都会交替颜色。形状同时执行这些操作。但是，只有一个方格可以做到这一点，而另一个方无效...请帮忙吗？

<!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>

Answer 1

好的......我会先谈谈你遇到的问题，然后我会尽力给你一些建议。

1）首先点击“移动”按钮，你只需要调用myMove()函数，该函数只负责移动animated div，因为你选择它：

var elem = document.getElementById("animate");

因此，如果你想同时移动两个，请确保你正在激活正确的功能，因为我想你可能同时打电话给myMovetwo()，或许你可以这样做：

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

这样你就可以调用move()并且两个调用都会运行。

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

其他建议是从您的html代码中删除onclick并从您的javascript代码中获取Click事件。

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

干杯！

Javascript动画麻烦

1 个答案: