尝试制作一个基本的加载页面

Question

这是我目前所拥有的...

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css"/>
    <title>Tommay's Super Secret Database</title>
</head>
<body>
    <p id="q">Establishing connection</p>
    <p id="w">Checking the time</p>
    <p id="e">Doing other stuff</p>
    <p id="r">Locating cows</p>

    <script type="text/javascript">
        var q = document.getElementById("q");
        var qdisplay = q.style.display;

        window.onload = active();

        function active() {
            if (qdisplay == "block") {
                window.alert("IT WORKS!!");
            }
        }
    </script>
</body>
</html>

CSS:

body {
    background: #c33f3f;
}

#q {
    font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
    margin-top: 300px;
    color: white;
    margin-left: 20px;
    dsplay: block;
}

基本上，我打算在一定时间后循环浏览 q、w、e 和 r 段落。为此，我将使用活动功能查看当前显示的是哪个。根据哪个显示器设置为阻塞，它将运行一个单独的函数，它将通过三个不同的 .innerHTML 事物，每个事物都在香味的末尾添加另一个句点。这将创建一种动画……东西。

这可能根本没有任何意义...例如，对于建立连接，它将运行通过 - 建立连接 - 到 - 建立连接。 - 然后 - 建立连接.. - 最后 - 建立连接... - 然后它将再次从头开始。它会这样做几次，直到将其显示设置为 "none," 将 w 的显示设置为 "block,"，然后调用 active() 函数。

现在，进入实际问题。我运行这个，然后...什么也没发生。警报从未弹出或任何东西。本来以为是active()函数没有运行ning，所以加了window.onload这个东西，还是不行。这让我相信我在检测 q 的样式是否为块时做错了什么。如何做到这一点？

顺便说一下，我知道这实际上并没有显示加载进度。我只是在搞 JavaScript.

是的，我看到了另一个问题，但它没有用。这是我的实现方式 - 我可能犯了一个错误？

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="main.css"/>
    <title>Loading...</title>
</head>
<body>
    <p id="q">Establishing connection...</p>

    <script type="text/javascript">
        var q = document.getElementById("q");
        var qdisplay = window.getComputedStyle("display");

        window.onload = active();

        function active() {
            if (qdisplay == "block") {
                window.alert("IT WORKS!!");
            }
        }
    </script>
</body>
</html>

我也试过用q.getComputedStyle，结果一样。帮忙？

Answer 1

我在这里所做的实际上是为您的元素添加样式（您没有）。此外，我还更正了您 CSS 中的一个拼写错误。您写的是 "dsplay" 而不是 "display"。

但是，这应该有效：

var q = document.getElementById("q");
var qdisplay = q.style.display;

window.onload = active();
function active() {
  if (qdisplay == "block") {
    window.alert("IT WORKS!!");
  }
}

body {
  background: #c33f3f;
}

#q {
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
  margin-top: 300px;
  color: white;
  margin-left: 20px;
  display: block;
}

  <p id="q" style="display: block">Establishing connection</p>
  <p id="w">Checking the time</p>
  <p id="e">Doing other stuff</p>
  <p id="r">Locating cows</p>

这是清理后的版本：

var ps = document.getElementsByTagName("p");
for(var i = 0; i < ps.length; i++){
  if(ps[i].className === "active"){
    alert(ps[i] + " " + i + " is active");
  }
}

body {
  background: #c33f3f;
}

p {
  font-family: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace;
}

.active{
  margin-top: 300px;
  color: white;
  margin-left: 20px;
}

<p class="active">Establishing connection</p>
<p>Checking the time</p>
<p>Doing other stuff</p>
<p>Locating cows</p>

Answer 2

我在解决这个问题时采用了不同的方向。

我建议只使用一个元素并用 javascript 填充和清空它。

HTML:

<html>
<head>
    <title>Tommay's Super Secret Database</title>
</head>
<body>
    <p id="loader"></p>
</body>
</html>

我没管你的CSS，唯一不同的是我把选择器#q改成了#loader。

现在的 JS：

function changeMsg (id, msg, i) {
  var elem = document.getElementById(id);
  var str = msg[i];
  while (elem.hasChildNodes()) {
    elem.removeChild(elem.firstChild);
  }
  if(msg[i]+1) {
    elem.innerHTML = str;
    window.setTimeout(changeMsg, 1000, id, msg, i+1);
    return;
  }
}

var msg = ['Establishing connection', 'Checking the time', 'Doing other stuff', 'Locating cows'];

changeMsg('loader', msg, 0);

让我分解一下我做了什么。

函数changeMsg接收三个参数：id、msg和i。

id 是我们要更改的元素的 ID（在本例中为 loader）
msg 是我们将显示的所有消息的数组
i 是我们将用来决定显示 msg 的哪个元素的索引

棘手的部分在最后：

  if(msg[i]+1) {
    elem.innerHTML = str;
    window.setTimeout(changeMsg, 1000, id, msg, i+1);
    return;
  }

这里我们检查是否有下一条消息（我们不希望在我们运行到msg之后显示undefined），然后设置一个超时来调用我们的具有相同参数但索引更高的函数。

当一切都完成后，我们将 0 的函数调用为 i 并让它运行它是当然的：

changeMsg('loader', msg, 0);

查看我的解决方案on jsbin。

尝试制作一个基本的加载页面

Trying to Make A Basic Loading Page

javascript

css

loading