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

试试这个

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 2

您可以使用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>

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

2 个答案: