Question

我在这里有一些代码，我希望方块变为蓝色，绿色，靛蓝然后回到开头。每次单击按钮，颜色都会改变。这里的代码是蓝色，绿色，靛蓝，然后靛蓝和黑色之间的变化，而我希望它再次变为蓝色。有没有办法再次重启整个代码？

<--code for animated squares!-->

<!DOCTYPE html>
<html>
<style>
#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: Black;
}
div#animate {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 175px;
  top: 0px;
  background-color: Blue;
}
</style>

<style>
#containertwo {
  width: 400px;
  height: 400px;
  position: relative;
  background: Black;
}
div#animatetwo {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 175px;
  top: 175px;
  background-color: Black;
}
</style>
<body>

<style>
#containerthree {
  width: 400px;
  height: 400px;
  position: relative;
  background: Black;
}
div#animatethree {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 175px;
  top: 350px;
  background-color: Black;
}
</style>

<body>

<p>
<button onClick="button_click();button_clicktwo();button_clickthree()">Change Colour</button>
</p>

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

<div id="box" onClick="button_click(j)();"></div>
<script>
var colors = ["Black","Black","Blue"];
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="button_clicktwo();"></div>
<script>
var colorstwo = ["Green","Black","Black",];
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="button_clickthree();"></div>
<script>
var colorsthree = ["Black","Indigo","Black"];
function button_clickthree() {
    var box = document.getElementById("animatethree");
    var background_color = box.style.backgroundColor;
    var i = colorsthree.indexOf(background_color);
    if (i === colorstwo.length-1) {
        i = -1;
    }
    animatethree.style.backgroundColor = colorsthree[i+1];
}
</script>

Answer 1

有相当多的无效和重复的代码，所以为了简单起见，我只是重写了整个事情。我会注意到下面的一些问题。

由于对HTML，CSS和JS进行了如此多的更改，我不会将它们全部列出，但会留给您观察差异。

＆＃13;

// Gather the colors and elements, and set a shared `i` to `0`
var colors = ["Blue", "Green", "Indigo"];
var elems = document.querySelectorAll(".animate");
var i = 0;

// Have a single function that makes the current element black and the next
// one a different color
function button_click() {
  elems[i].style.backgroundColor = "Black";

  if (++i === colors.length) {
    i = 0
  }

  elems[i].style.backgroundColor = colors[i];
}

＆＃13;

#container {
  width: 400px;
  height: 400px;
  position: relative;
  background: Black;
}
.animate {
  width: 50px;
  height: 50px;
  left: 175px;
  position: absolute;
}
.animate:nth-child(1) {
  top: 0px;
  background-color: Blue;
}
.animate:nth-child(2) {
  top: 175px;
}
.animate:nth-child(3) {
  top: 350px;
}

＆＃13;

<p>
  <button onClick="button_click();">Change Colour</button>
</p>

<div id="container">
  <div class="animate"></div>
  <div class="animate"></div>
  <div class="animate"></div>
</div>

＆＃13;

请注意，还有其他方法可以执行此操作，例如在CSS中设置每种颜色，然后使用JavaScript将visibility设置为hidden或visible。

一些一般问题是：

多次使用相同的ID属性
额外的<body>代码
大量重复的CSS，JS和HTML可以大大减少

如何在javascript中循环多个脚本？

1 个答案: