Question

我正在设计一个鱼缸。页面的整个背景是水。我想设置一个功能，在5000毫秒后将水从蓝色变为棕色，然后暂停。然后用户点击按钮“清洁水箱”，这将重置背景改变功能。

我能找到的唯一解决方案是循环继续将背景从蓝色变为绿色。

var intPgColorIndex = 0;
var arrPgColor = new Array("#999966", "#00ffff" );
function SetPgColor()
{
var PgColor;
intPgColorIndex++;
if (intPgColorIndex >= arrPgColor.length)


{
intPgColorIndex = 0;
}
PgColor = arrPgColor[intPgColorIndex];
if (PgColor = "#999966" ) {
 document.body.style.backgroundColor = PgColor;
 setTimeout("SetPgColor()", 5000);
 }


  };

Answer 1

阻止代码按预期运行的唯一部分是您使用=代替==来比较值。

然而，你的代码很丑陋，所以这是一个更好的版本：

setTimeout(function dirty() {
    document.body.style.backgroundColor = "#996";
    var btn = document.body.appendChild(document.createElement('button'));
    btn.appendChild(document.createTextNode("Clean the tank"));
    btn.onclick = function clean() {
        btn.parentNode.removeChild(btn);
        document.body.style.backgroundColor = "#0ff";
        setTimeout(dirty,5000);
    };
},5000);

Answer 2

function clean() {
  clearTimeout(dirt);
  var dirt = setTimeout(dirt, 5000)
  //set color to blue
}
function dirt() {
  //set color to brown
}

在程序开始时调用clean，并在用户单击按钮或其他内容时执行。它将等待5秒（有点短的imo），然后运行污垢功能。直到用户点击按钮时才会发生任何事情，此时油箱被清洁，然后再次等待5秒再变脏。简单，干净，有效。：d

Javascript使用settimeout更改背景颜色

2 个答案: