Question

我想在javascript中每秒显示一行，但它不起作用...

function showIt1() {
  document.getElementById("div1").style.visibility = "visible";
}
function showIt2() {
  document.getElementById("div2").style.visibility = "visible";
}
function showIt3() {
  document.getElementById("div3").style.visibility = "visible";
}

window.onload = function() {
setTimeout("showIt1()", 1000);
setTimeout("showIt2()", 2000);
setTimeout("showIt3()", 3000);
}

Answer 1

您可以将display属性与block值一起使用，因为它会覆盖最初的display: none。

对于使用setTimeout，您可以插入对函数的引用，而不使用字符串并提供id的参数并仅使用一个函数。

＆＃13;

function showIt(id) {
    document.getElementById(id).style.display = "block";
}

window.onload = function() {
    setTimeout(showIt, 1000, 'div1');
    setTimeout(showIt, 2000, 'div2');
    setTimeout(showIt, 3000, 'div3');
};

＆＃13;

#div1, #div2, #div3 { display: none; }

＆＃13;

<div id="div1"><h1>1 line</h1></div>
<div id="div2"><h1>2 line</h1></div>
<div id="div3"><h1>3 line</h1></div>

＆＃13;

Answer 2

您需要直接引用该函数，而不是字符串：

function showIt1() {
  document.getElementById("div1").style.visibility = "visible";
}
function showIt2() {
  document.getElementById("div2").style.visibility = "visible";
}
function showIt3() {
  document.getElementById("div3").style.visibility = "visible";
}

window.onload = function() {
setTimeout(showIt1, 1000);
setTimeout(showIt2, 2000);
setTimeout(showIt3, 3000);
}

Answer 3

在setTimeout中，您将第一个参数提供为字符串。它应该是一个功能名称，如下所示：

setTimeout(showIt1, 1000);

所以，这一切看起来像是：

function showIt1() {
  document.getElementById("div1").style.visibility = "visible";
}
function showIt2() {
  document.getElementById("div2").style.visibility = "visible";
}
function showIt3() {
  document.getElementById("div3").style.visibility = "visible";
}

window.onload = function() {
  setTimeout(showIt1, 1000);
  setTimeout(showIt2, 2000);
  setTimeout(showIt3, 3000);
}

setTimeout（）接受 Function 作为它的第一个参数。当您创建一个名为 showIt1 的函数时，那么当您向控制台写入如下内容时：

console.log(showIt1)

将输出：“功能”。这就是为什么你也可以像这样调用setTimeout（）：

setTimeout(function() {
  document.getElementById("div1").style.visibility = "visible";
}, 1000);

Answer 4

一些事情：

1）更改document.getElementById以获取JQquery $("#id")

2）在<div> ID

上添加了引号

3）使用.css（）函数：

HTML：

<div id="div1"><h1>1 line</h1></div>
<div id="div2"><h1>2 line</h1></div>
<div id="div3"><h1>3 line</h1></div>

JS：

function showIt1() {
  $("#div1").css('display','block');
}
function showIt2() {
  $("#div2").css('display','block');
}
function showIt3() {
 $("#div3").css('display','block');
}

window.onload = function() {
console.log('onload');
setTimeout("showIt1()", 1000);
setTimeout("showIt2()", 2000);
setTimeout("showIt3()", 3000);
}

的jsfiddle：https://jsfiddle.net/dudu84/d9a784ta/2/

在javascript中显示每秒一行

4 个答案: