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()。考虑到这些问题，请尝试以下方法：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

请注意，根据此逻辑，您不会隐藏黄色div - 正如您的标题所暗示的那样。只有当您更改其背景颜色以匹配body的黑色背景时，才会立即显而易见。如果要使元素完全不可见，请使用display属性。您还可以在CSS中设置它以避免在页面加载时出现FOUC：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

最后，这是上面的jQuery实现，因为您已经标记了这样的问题：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

setTimeout（）语法

setTimeout()函数实际上需要将函数传递给它而不是字符串：

setTimeout(function(){
   document.getElementById('yellow').style.visibility = 'visible'; 
}, 2000);

此外，您可以考虑仅应用CSS样式来处理默认隐藏的CSS样式（即display: none），然后只在setTimeout()的正文中显示它，而不是通过Javascript隐藏它功能调用。

示例

＆＃13;
＆＃13;
function initialSetup() { if (document.getElementById("yellow") != null) { document.getElementById('yellow').style.visibility = 'hidden'; setTimeout(function() { document.getElementById('yellow').style.visibility = 'visible'; }, 2000); } } initialSetup();
＆＃13;
.box { width: 50px; height: 50px; } .yellow { background: yellow; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } body { background-color: black; }
＆＃13;
<body> <div id="yellow" class="box yellow"></div> </body>
＆＃13;
＆＃13;
＆＃13;

Answer 3

试试这个

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

将div设置为隐藏，然后在延时后显示

3 个答案: