Question

在这个小代码中，我试图平滑地改变身体背景的颜色，对于第一次测试，它做了一次最佳工作，在其他测试中，颜色随着闪烁而改变。谁知道原因？请求为我解决？这违背了我对这个计划的目标，但我发现这是真正的彩色舞蹈。：D

＆＃13;

<html>
<body>
 Interval:<input type="number" id="interval" min="0" placeholder="millisecond" value="10" step="10"/>
 Start Point Color: 
  R<input type="number" id="redStart" min="0" max="255" placeholder="ed" value="0"/>
  G<input type="number" id="greenStart" min="0" max="255" placeholder="reen" value="0"/> 
  B<input type="number" id="blueStart" min="0" max="255" placeholder="lue" value="0"/>
 Dancing Color:
  R:<input type="checkbox" id="redDance" checked="true"/>
  G:<input type="checkbox" id="greenDance"/>  
  B:<input type="checkbox" id="blueDance"/>
  <button type="button" id="dance">Dance</button>
  <button type="button" id="stopDance">Stop Dance</button>

 <script type="text/javascript">

	//event for click on dance button
    document.getElementById('dance').onclick = Dancer;
	document.getElementById('stopDance').onclick = stopDancer;

	// this is the dancer function that is responsible for the background color dancing
	function Dancer(){
		var body_color  = document.body.style.backgroundColor;
		var interval_ms = document.getElementById('interval').value;
		var is_red = document.getElementById('redDance').checked;
		var is_green = document.getElementById('greenDance').checked;
		var is_blue = document.getElementById('blueDance').checked;
		var red = document.getElementById('redStart').value;
		var green = document.getElementById('greenStart').value;
		var blue = document.getElementById('blueStart').value;
		//document.body.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
	    document.dancing = setInterval(function(){
			if (is_red && red < 255){
			 red++;
			 document.getElementById('redStart').value = red;
			}
			if(is_green && green < 255){
			 green++;
			 document.getElementById('greenStart').value = green;
			}
			if(is_blue && blue < 255){
			 blue++;
			 document.getElementById('blueStart').value = blue;
			}
			document.body.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
		},interval_ms
		);
	}
	
	//this is the dancer stop function
	function stopDancer(){
		clearInterval(document.dancing);
	}
  
 </script>
 </body>
 
</html>

＆＃13;

Answer 1

试试这个Fiddle。

我只是在你的函数开头添加了一个clearInterval。现在它没有眨眼。那是你想要的吗？

Answer 2

当您再次启动Dancer()并且必须清除时，您的间隔仍在运行。我在颜色完成时添加了else语句，并在所有颜色完成时添加了if语句来清除间隔。我还使用else if语句扩展了代码，以便在未选中时对颜色进行倒计时。

＆＃13;

//event for click on dance button
document.getElementById('dance').onclick = Dancer;
document.getElementById('stopDance').onclick = stopDancer;

// this is the dancer function that is responsible for the background color dancing
function Dancer(){
  clearInterval(document.dancing);
  var body_color  = document.body.style.backgroundColor;
  var interval_ms = document.getElementById('interval').value;
  var is_red = document.getElementById('redDance').checked;
  var is_green = document.getElementById('greenDance').checked;
  var is_blue = document.getElementById('blueDance').checked;
  var red = document.getElementById('redStart').value;
  var green = document.getElementById('greenStart').value;
  var blue = document.getElementById('blueStart').value;
  var redDone = false;
  var greenDone = false;
  var blueDone = false;
  document.dancing = setInterval(function(){
    if (is_red && red < 255){
      red++;
      document.getElementById('redStart').value = red;
    }
    else if (!is_red && red > 0){
      red--;
      document.getElementById('redStart').value = red;
    }
    else {
      redDone = true;
    }
    if(is_green && green < 255){
      green++;
      document.getElementById('greenStart').value = green;
    }
    else if(!is_green && green > 0){
      green--;
      document.getElementById('greenStart').value = green;
    }
    else {
      greenDone = true;
    }
    if(is_blue && blue < 255){
      blue++;
      document.getElementById('blueStart').value = blue;
    }
    else if(!is_blue && blue > 0){
      blue--;
      document.getElementById('blueStart').value = blue;
    }
    else {
      blueDone = true;
    }
    document.body.style.backgroundColor = 'rgb(' + red + ',' + green + ',' + blue + ')';
    if(redDone && greenDone && blueDone){
      clearInterval(document.dancing);
    }
  },interval_ms
                                );
}

//this is the dancer stop function
function stopDancer(){
  clearInterval(document.dancing);
}

＆＃13;

Interval:<input type="number" id="interval" min="0" placeholder="millisecond" value="10" step="10"/>
Start Point Color: 
R<input type="number" id="redStart" min="0" max="255" placeholder="ed" value="0"/>
G<input type="number" id="greenStart" min="0" max="255" placeholder="reen" value="0"/> 
B<input type="number" id="blueStart" min="0" max="255" placeholder="lue" value="0"/>
Dancing Color:
R:<input type="checkbox" id="redDance" checked="true"/>
G:<input type="checkbox" id="greenDance"/>  
B:<input type="checkbox" id="blueDance"/>
<button type="button" id="dance">Dance</button>
<button type="button" id="stopDance">Stop Dance</button>

＆＃13;

为什么背景颜色闪烁而不是平滑变化？

2 个答案: