Question

我正在制作一个主要由嵌入式JavaScript处理的HTML文件的小动画，我的问题是，由于某些逻辑错误或函数的误用，下面的代码似乎不起作用（仍然不完全确定）哪里）。有人可以提供替代或修复吗？

这是我的代码：

<!DOCTYPE html>
<HTML>
  <head>
      <script>
        function onload(){
          while (1!=1){
            console.log("True")
            function SI(){
              console.log("SI")
              var greenOn = document.getElementById("green").style.display;
              var yellowOn = document.getElementById("yellow").style.display;
              var redOn = document.getElementById("red").style.display;
              if (greenOn != "none"){
                document.getElementById("green").style.display = "none";
                document.getElementById("yellow").style.display = "";
              }
              else if (yellowOn != "none") {
                document.getElementById("yellow").style.display = "none";
                document.getElementById("red").style.display = "";
              }
              else{
                document.getElementById("red").style.display = "none";
                document.getElementById("green").style.display = "";
              }
          }
        setTimeout(function(){console.log("Color change")},3000);
        SI();
      }
    }
      </script>
  </head>
  <body>
      <img id="red" src="red.png" style="display: none;" width="400" height="400"/>
      <img id="yellow" src="yellow.png" style="display: none;" width="400" height="400"/>
      <img id="green" src="Green.jpg" style="display: ;" width="400" height="400"/>
      <br/>
      <p onload="onload()"></p>
  </body>
</HTML>

Answer 1

尝试以下方法：

<!DOCTYPE html>
<HTML>
  <head>
      <script>
        function onload(){
            var greenOn = document.getElementById("green").style.display;
            var yellowOn = document.getElementById("yellow").style.display;
            var redOn = document.getElementById("red").style.display;
            if (greenOn != "none"){
              document.getElementById("green").style.display = "none";
              document.getElementById("yellow").style.display = "";
            }
            else if (yellowOn != "none") {
              document.getElementById("yellow").style.display = "none";
              document.getElementById("red").style.display = "";
            }
            else{
              document.getElementById("red").style.display = "none";
              document.getElementById("green").style.display = "";
            }
    console.log("Color change");
        setTimeout(function(){onload()},3000);
        }
      </script>
  </head>
  <body>
      <img id="red" src="red.png" alt="Red" style="display: none;" width="400" height="400"/>
      <img id="yellow" src="yellow.png" alt="Yellow" style="display: none;" width="400" height="400"/>
      <img id="green" src="Green.jpg" alt="Green" style="display: ;" width="400" height="400"/>

  <script>
  onload()
  </script>
  </body>
</HTML>

Answer 2

首先，设置间隔必须是外部函数。一种解决方案可以是：

<!DOCTYPE html>
    <HTML>
      <head>
  <script>

              function SI(){
                var greenOn = document.getElementById("green").style.display;
                var yellowOn = document.getElementById("yellow").style.display;
                var redOn = document.getElementById("red").style.display;
                if (greenOn != "none"){
                  document.getElementById("green").style.display = "none";
                  document.getElementById("yellow").style.display = "";
                }
                else if (yellowOn != "none") {
                  document.getElementById("yellow").style.display = "none";
                  document.getElementById("red").style.display = "";
                }
                else{
                  document.getElementById("red").style.display = "none";
                  document.getElementById("green").style.display = "";
                }
              }

                function Timer(){
              setTimeout(SI(),3000);
    }
          </script>
      </head>
      <body>
          <img id="red" src="red.png" style="display: none;" width="400" height="400"/>
          <img id="yellow" src="yellow.png" style="display: none;" width="400" height="400"/>
          <img id="green" src="Green.jpg" style="display: ;" width="400" height="400"/>
          <br/>
          <p onload="Timer()" />
      </body>
    </HTML>

Answer 3

该功能的逻辑并没有多大意义。我不确定while(true)是做什么的？从评论看来，它一直在定义函数SI()。现在，你的超时setTimeout(function(){console.log("Color change")},3000);所做的就是onload次火将Color Change写入控制台后3秒。

现在我相信你想要切换的每3000毫秒（3秒）改变图像display属性。

首先将SI()方法移到onload函数之外。这不是必需的，但会使其更容易理解（还建议更改函数名称以使其更具描述性）。

window.onload = function () {
    setTimeout(function() {
      SI();
    }, 3000);

}
function SI() {
    console.log('Color change');
  var greenOn = document.getElementById("green").style.display;
  var yellowOn = document.getElementById("yellow").style.display;
  var redOn = document.getElementById("red").style.display;
  if (greenOn != "none") {
    document.getElementById("green").style.display = "none";
    document.getElementById("yellow").style.display = "";
  } else if (yellowOn != "none") {
    document.getElementById("yellow").style.display = "none";
    document.getElementById("red").style.display = "";
  } else {
    document.getElementById("red").style.display = "none";
    document.getElementById("green").style.display = "";
  }
  setTimeout(function() {
      SI();
    }, 3000);
}

现在你会看到我改变了一些东西。首先，我删除了onload()函数，而是使用附加函数的window.onload方法在窗口加载时运行。

这将启动3000 ms计时器以运行函数SI()。在SI()函数末尾的位置设置另一个超时以在SI() ms之后运行函数3000

编辑好玩

只是为了好玩而创建了一个仅限CSS的版本。

$(function() {
  setTimeout(function() {
    changeCircleColor();
  }, 3000);

});

function changeClass(e, from, to) {
  e.removeClass(from).addClass(to);
}

function changeCircleColor() {
  
  var c = $('#circle');
  if (c.hasClass('red')) changeClass(c, 'red', 'green');
  else if (c.hasClass('yellow')) changeClass(c, 'yellow', 'red');
  else changeClass(c, 'green', 'yellow')

  setTimeout(function() {
    changeCircleColor();
  }, 3000);
}

.circle {
  display: inline-block;
  height: 200px;
  width: 200px;
  border-radius: 100px;
}

.circle.red {
  background-color: red;
}

.circle.green {
  background-color: green;
}

.circle.yellow {
  background-color: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<span id="circle" class="circle red"></span>

在HTML中创建Javascript动画

3 个答案: