将div设置为隐藏，延时后可见

Question

我试图在 X 时间后（也许甚至在随机时间之后，但现在我们只做固定时间）在黑色背景上出现一个黄色方块。

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    document.getElementById('yellow').style.visibility = 'hidden';
    setTimeout("document.getElementById('yellow').style.visibility = 'visible'", 2000);
  }

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: black;
}

<div id="yellow" class="box yellow"></div>

此代码最初应隐藏黄色方块，然后在 2 秒后显示它。但这不起作用。当我尝试使用按钮启动 javascript 函数时，它也不起作用。我查看了其他示例并将我的代码与他们的代码进行了比较，看起来它应该可以工作！

https://jsfiddle.net/xxPoLyGLoTxx/51spg8d1/

Answer 1

首先你的语法缺少一个}. 其次，为了遵循最佳实践，您应该提供setTimeout函数参考。您当前的代码将通过这种方式调用eval()，应不惜一切代价避免这种情况。第三，您需要使用backgroundColor，而不是color，来设置元素背景。最后，你不要打电话到intitialSetup()任何地方。考虑到这些问题，请尝试以下操作：

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    document.getElementById('yellow').style.backgroundColor = 'black';
    setTimeout(function() {
      document.getElementById('yellow').style.backgroundColor = 'yellow'
    }, 2000);
  }
}

initialSetup();

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
body {
  background-color: black;
}

<div id="yellow" class="box yellow"></div>

请注意，通过这种逻辑，您不会隐藏黄色div- 正如您的标题所暗示的那样。只是当您更改其背景颜色以匹配body. 如果您想让元素完全不可见，请使用该display属性。您还可以在 CSS 中设置它以避免页面加载时出现 FOUC：

function initialSetup() {
  if (document.getElementById("yellow") != null) {
    setTimeout(function() {
      document.getElementById('yellow').style.display = 'block';
    }, 2000);
  }
}

initialSetup();

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
body {
  background-color: black;
}

<div id="yellow" class="box yellow"></div>

最后，这是上述内容的 jQuery 实现，因为您已将问题标记为这样：

$(function() {
  setTimeout(function() {
    $('#yellow').show()
  }, 2000);
});

.box {
  width: 50px;
  height: 50px;
}
.yellow {
  background: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
body {
  background-color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="yellow" class="box yellow"></div>