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内容，每个内容在场景结束时添加另一个句点。这将创造一种动画......的东西。

这根本没有任何意义......例如，通过建立连接，它将贯穿 - 建立连接 - 至 - 建立连接。 - 然后 - 建立联系.. - 最后 - 建立联系... - 然后它会再次从头开始。它会这样做几次，直到它将显示设置为＆＃34; none，＆＃34;将w的显示设置为＆＃34; block，＆＃34;然后调用active（）函数。

现在，关于实际问题。我跑了这个，......什么都没发生。警报从未弹出或任何东西。我原本以为是因为active（）函数没有运行，所以我添加了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

我在解决这个方面走了另一个方向。

我建议只使用一个元素并使用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;
  }

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

完成所有操作后，我们将0作为i调用该函数并让它运行它的过程：

changeMsg('loader', msg, 0);

查看我的解决方案on jsbin。

Answer 2

我在这里所做的实际上是为你的元素添加一个样式（你没有一个）。我也纠正了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>

试图创建一个基本的加载页面

2 个答案: