gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 08:16:42 27 4
gpt4 key购买 nike

在这个小代码中,我试图平滑地改变 body 背景的颜色,第一次测试它做了一次最好的工作,在其他测试中颜色随着闪烁而改变。谁知道原因?请帮我解决一下?这违背了我这个节目的目标,但我发现这才是真正的彩色舞蹈。:D

<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>

最佳答案

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

//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);
}
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>

关于javascript - 为什么背景颜色闪烁而不是平滑变化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32928080/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com