Question

所以我一直试图进行这种转换，这在我脑海中很简单。陈述变量＆＃34; num＆＃34;等于1开始，设置＆＃34;如果＆＃34;或＆＃34;而＆＃34;何时＆＃34; num＆＃34;等于2，某个div的背景颜色将从白色变为黄色，然后以0.5秒的间隔变回。我认为我的问题是我似乎无法改变全局变量。我已将其更改为2，并且循环有效，但是当它1并且我尝试使用按钮更改为2时，没有什么可以开心的！这是我到目前为止的JS：

var num = 1;
document.getElementById("numberDisplay").innerHTML = num;
if (num == 2) {
  var flash = setInterval(timer, 1000);
  function timer() {
    document.getElementById("colorChanger").style.backgroundColor = "yellow";
    setTimeout(white, 500);
    function white() {
      document.getElementById("colorChanger").style.backgroundColor = "white";
    }
  }
} else {
  document.getElementById("colorChanger").style.backgroundColor = "white";
  document.getElementById("numberDisplay").innerHTML = num;
}
document.getElementById("buttonOne").onclick=function(){num = 1;}
document.getElementById("buttonTwo").onclick=function(){num = 2;}

编辑：1/30/2018 12:25 pm 真的很感谢帮帮人！我的一个朋友实际上给了我一些建议，那就是使用window.onload和事件计时器！这就是我想出的：

   var num = 1;

   window.onload = function(){
    var button1 = document.getElementById("buttonOne")
    var button2 = document.getElementById("buttonTwo")
    button1.addEventListener("click",function(){
        num = 2;
    })
    button2.addEventListener("click",function(){
        num = 1;
    })
    setInterval(checkNum, 1000);
   }

   function checkNum() {
    if (num == 2) {
            document.getElementById("buttonOne").style.backgroundColor = "#ccccb3";
            document.getElementById("buttonTwo").style.backgroundColor = "white";
            document.getElementById("lightChanger").style.backgroundColor = "yellow";
            setTimeout(grey, 500);
            function grey() {
            document.getElementById("lightChanger").style.backgroundColor = "grey";
                }
    } else {
        document.getElementById("lightChanger").style.backgroundColor = "grey";
        document.getElementById("buttonOne").style.backgroundColor = "white";
        document.getElementById("buttonTwo").style.backgroundColor = "#ccccb3";
    }
}

Answer 1

您可以直接在点击处理程序中使用timer函数，而不是setInterval，而您的timer函数可以使用

var colorChanger = document.getElementById("colorChanger");
function white() {
  colorChanger.style.backgroundColor = "white";
}

function timer(n) {
  num = n;
  if (num == 2) {
    colorChanger.style.backgroundColor = "yellow";
    setTimeout(white, 500);
    return;
  }
  colorChanger.style.backgroundColor = "white";
}

试试这个，

＆＃13;

var num = 1;
var colorChanger = document.getElementById("colorChanger");


function white() {
  colorChanger.style.backgroundColor = "white";
}

function timer(n) {
  num = n;
  if (num == 2) {
    colorChanger.style.backgroundColor = "yellow";
    setTimeout(white, 500);
    return;
  }
  colorChanger.style.backgroundColor = "white";
}

document.getElementById("buttonOne").onclick = function() {
  timer(1);
}
document.getElementById("buttonTwo").onclick = function() {
  timer(2);
}

＆＃13;

<div id="colorChanger">switch</div>


<button id='buttonOne'>1</button>
<button id='buttonTwo'>2</button>

＆＃13;

Answer 2

但是当它为1并且我尝试使用按钮更改为2时，没有什么可以开心的！

因为在点击时，您正在更改变量。除非可以观察到，否则不会触发任何事情。您必须将相关代码包装为函数并改为调用它。

function timer(n) {
  function updateBackground(color) {
    document.getElementById("colorChanger").style.backgroundColor = "yellow";
  }
  var colors = ['white', 'yellow'];
  updateBackground(colors[n - 1]);
  if (n === 2) {
    setTimeout(function() {
      updateBackground('white')
    }, 500);
  }
}

document.getElementById("buttonOne").onclick = function() {
  timer(1);
}
document.getElementById("buttonTwo").onclick = function() {
  timer(2);
}

<div id="colorChanger">switch</div>


<button id='buttonOne'>1</button>
<button id='buttonTwo'>2</button>

几点改进，

任何不在函数中的变量都将成为全局范围的一部分。你应该避免它。
我建议避免.onclick。如果我获取元素并将其替换为我的函数，它将破坏您的代码。始终更喜欢使用.addEventListener。但这是自以为是。
您应该使用类而不是设置个人风格。它保持代码清洁和可维护。

function timer(n) {
  if (n === 2) {
    document.getElementById("colorChanger").classList.add("yellow");
    setTimeout(function() {
      document.getElementById("colorChanger").classList.remove("yellow");
    }, 500);
  }
}

document.getElementById("buttonOne").onclick = function() {
  timer(1);
}
document.getElementById("buttonTwo").onclick = function() {
  timer(2);
}

.white {
  background: white;
}

.yellow {
  background: yellow;
  /* This is for demo purpose only */
  font-weight: bold;
}

<div id="colorChanger" class='white'>switch</div>


<button id='buttonOne'>1</button>
<button id='buttonTwo'>2</button>

参考文献：

Answer 3

我改变了一些事情：

(function(){
	var changeColor = function(num) {
		document.getElementById("numberDisplay").innerHTML = num;
		if (num === 2) {
	  		var flash = setInterval(timer, 1000);
	  		function timer() {
	    		document.getElementById("colorChanger").style.backgroundColor = "yellow";
	    		setTimeout(white, 500);
	    		function white() {
	      			document.getElementById("colorChanger").style.backgroundColor = "white";
	    		}
	  		} 
	  	} else {
	  		document.getElementById("colorChanger").style.backgroundColor = "white";
	  		document.getElementById("numberDisplay").innerHTML = num;
		}
	}
	
	document.getElementById("buttonOne").addEventListener('click', function(evt){
		let num = 1;
		changeColor(num);
	});
	document.getElementById("buttonTwo").addEventListener('click', function(evt){
		let num = 2;
		changeColor(num);
	});
})();

<div id="numberDisplay"></div>
<div id="colorChanger">Color</div>
<button id="buttonOne">1</button>
<button id="buttonTwo">2</button>

循环改变背景颜色与javascript中的开关

3 个答案:

参考文献：