单击按钮时以指定的时间间隔更改颜色

Question

我正在尝试在我的网页上使用一些 CSS 和 JavaScript。

我有 3 个盒子，我希望所有 3 个盒子都更改为不同的颜色并渲染到屏幕上并再次更改颜色。

例如， 我在屏幕上有 3 个黑框。当我点击一个按钮 程序将等待 2 秒 然后 3 个框将变为红色。等待 2 秒 然后 3 个框将变为蓝色。等待 2 秒 然后这 3 个框将变为绿色。

这是我所拥有的：

elem1 = document.getElementById('1')
elem2 = document.getElementById('2')
elem3 = document.getElementById('3')
colorlist = ['purple', 'red', 'blue', 'green']

function changeColor() {
  showRed()
  //wait 2 seconds
  showBlue()
  //wait 2 seconds
  showGreen()
  //wait 2 seconds
}

function showRed() {
  elem1.style.background = "red"
  elem2.style.background = "blue"
  elem3.style.background = "green"
}

function showBlue() {
  elem1.style.background = "blue"
  elem2.style.background = "green"
  elem3.style.background = "red"
}

function showGreen() {
  elem1.style.background = "green"
  elem2.style.background = "red"
  elem3.style.background = "blue"
}

* {
  box-sizing: border-box;
}

.column3 {
  float: left;
  min-width: 15px;
  max-width: 15px;
  min-height: 15px;
  max-height: 15px;
  padding: 15px;
  background-color: black;
  border-style: solid;
  border-width: medium;
  border-color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="row">
  <div class="column3" id="1"></div>
  <div class="column3" id="2"></div>
  <div class="column3" id='3'></div>
  <button onclick='changeColor()'> Test </button>
</div>

Answer 1

如果您再次执行相同 事情，请使用循环。

起止间隔：

var interval;

function start() {
  interval = setInterval(function() {}, ms);
}

function stop() {
  clearInterval(interval);
}

通过NodeList 与

[].forEach.call()

总计

var els = document.querySelectorAll(".boxes > div"),
  colors = ["blue", "green", "purple", "red"],
  ms = 2000,
  interval;

function start(els, colors, ms) {
  var i = 0;
  interval = setInterval(function() {
    [].forEach.call(els, function(el) {
      el.style.backgroundColor = colors[i];
    })
    i += 1;
    i === colors.length ? i = 0 : false;
  }, ms);
}

function stop() {
  clearInterval(interval);
}

document.getElementById("start").addEventListener("click", function() {
  start(els, colors, ms);
})
document.getElementById("stop").addEventListener("click", function() {
  stop();
});

.flexbox {
  display: flex;
  justify-content: center;
  padding: 15px;
}

.boxes>div {
  width: 70px;
  height: 70px;
  margin: 5px;
  background: black;
}

button {
  margin: 3px;
}

<div class="flexbox boxes">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="flexbox">
  <button id="start">Start</button>
  <button id="stop">Stop</button>
</div>

Answer 2

试试这个

elem1 = document.getElementById('1')
elem2 = document.getElementById('2')
elem3 = document.getElementById('3')
colorlist = ['purple', 'red', 'blue', 'green']

function changeColor() {
	setInterval(function(){
		var c1=colorlist.length;
		var x=parseInt(Math.random()*c1);
		f(x);
	},2000);
/*  // Show updated color change for 2 seconds
  f(1)
  // Show updated color change for 2 seconds
  f(2)*/
}

function f(x) {
  elem1.style.background = colorlist[x]
  elem2.style.background = colorlist[x]
  elem3.style.background = colorlist[x]
}

* {
  box-sizing: border-box;
}

.column3 {
  float: left;
  min-width: 15px;
  max-width: 15px;
  min-height: 15px;
  max-height: 15px;
  padding: 15px;
  background-color: black;
  border-style: solid;
  border-width: medium;
  border-color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="row">
  <div class="column3" id="1"></div>
  <div class="column3" id="2"></div>
  <div class="column3" id='3'></div>
  <button onclick='changeColor()'> Test </button>
</div>

Answer 3

您可以使用setInterval 以指定的时间间隔执行function。请注意，完成列表后，您必须清除间隔，否则setInterval 将继续执行提供的function。你可以使用clearInterval来做到这一点。

elem1 = document.getElementById('1')
elem2 = document.getElementById('2')
elem3 = document.getElementById('3')
colorlist = ['purple', 'red', 'blue', 'green']

function changeColor() {
  var i = 0
  var interval = null;
  interval = setInterval(function() {
    if (i == colorlist.length - 1) clearInterval(interval)
    f(i++)
  }, 2000)
}

function f(x) {
  elem1.style.background = colorlist[x]
  elem2.style.background = colorlist[x]
  elem3.style.background = colorlist[x]
}

* {
  box-sizing: border-box;
}

.column3 {
  float: left;
  min-width: 15px;
  max-width: 15px;
  min-height: 15px;
  max-height: 15px;
  padding: 15px;
  background-color: black;
  border-style: solid;
  border-width: medium;
  border-color: white;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

<div class="row">
  <div class="column3" id="1"></div>
  <div class="column3" id="2"></div>
  <div class="column3" id='3'></div>
  <button onclick='changeColor()'> Test </button>
</div>