在HTML中创建Javascript动画_Javascript_Html_Animation

在HTML中创建Javascript动画

javascript html animation

在HTML中创建Javascript动画,javascript,html,animation,Javascript,Html,Animation,我正在用一个主要由嵌入式JavaScript处理的HTML文件制作一个小动画，我的主要问题是，由于一些逻辑错误或函数误用（仍然不完全确定在哪里），下面的代码似乎无法工作。有人能提供一个替代方案或修复方案吗这是我的密码： <!DOCTYPE html> <HTML> <head> <script> function onload(){ while (1!=1){ cons

我正在用一个主要由嵌入式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>


函数onload（）{
而（1！=1）{
console.log（“True”）
函数SI（）{
控制台日志（“SI”）
var greenOn=document.getElementById（“绿色”）.style.display；
var yellowOn=document.getElementById（“黄色”）.style.display；
var redOn=document.getElementById（“红色”）.style.display；
如果（绿色！=“无”）{
document.getElementById（“绿色”）.style.display=“无”；
document.getElementById（“黄色”）.style.display=“”；
}
否则如果（yellowOn！=“无”）{
document.getElementById（“黄色”）.style.display=“无”；
document.getElementById（“红色”）.style.display=“”；
}
否则{
document.getElementById（“红色”）.style.display=“无”；
document.getElementById（“绿色”）.style.display=“”；
}
}
setTimeout（function（）{console.log（“颜色变化”）}，3000）；
SI（）；
}
}

尝试以下方法：

<!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>


函数onload（）{
var greenOn=document.getElementById（“绿色”）.style.display；
var yellowOn=document.getElementById（“黄色”）.style.display；
var redOn=document.getElementById（“红色”）.style.display；
如果（绿色！=“无”）{
document.getElementById（“绿色”）.style.display=“无”；
document.getElementById（“黄色”）.style.display=“”；
}
否则如果（yellowOn！=“无”）{
document.getElementById（“黄色”）.style.display=“无”；
document.getElementById（“红色”）.style.display=“”；
}
否则{
document.getElementById（“红色”）.style.display=“无”；
document.getElementById（“绿色”）.style.display=“”；
}
控制台日志（“颜色变化”）；
setTimeout（函数（）{onload（）}，3000）；
}
onload（）

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

<!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>


函数SI（）{
var greenOn=document.getElementById（“绿色”）.style.display；
var yellowOn=document.getElementById（“黄色”）.style.display；
var redOn=document.getElementById（“红色”）.style.display；
如果（绿色！=“无”）{
document.getElementById（“绿色”）.style.display=“无”；
document.getElementById（“黄色”）.style.display=“”；
}
否则如果（yellowOn！=“无”）{
document.getElementById（“黄色”）.style.display=“无”；
document.getElementById（“红色”）.style.display=“”；
}
否则{
document.getElementById（“红色”）.style.display=“无”；
document.getElementById（“绿色”）.style.display=“”；
}
}
函数计时器（）{
setTimeout（SI（），3000）；
}

函数的逻辑没有真正意义。我不确定

while（true）

被怀疑要做什么？从review中，它似乎一直在定义函数

SI（）

。现在还有您的timeout

setTimeout（function（）{console.log（“Color change”）}，3000）只需在onload
触发后3秒，即可将颜色更改写入控制台
现在，我相信您想要的是，每3000
ms（3秒）您希望切换一次图像display
属性
首先，将SI（）
方法移到onload
函数之外。这不是必需的，但会使它更容易理解（还建议将函数名更改为更具描述性）
现在你会看到我改变了一些事情。首先，我删除了onload（）
函数，而是使用了window.onload
方法，在加载窗口时附加一个要运行的函数
这将启动3000
ms计时器以运行函数SI（）
。其中，在SI（）
函数的末尾，设置另一个超时，以在3000
ms之后运行函数SI（）

编辑以获得乐趣
只是为了好玩，我们创建了一个CSS版本

$（函数（）{
setTimeout（函数（）{
changeCircleColor（）；
}, 3000);
});
函数changeClass（e、from、to）{
e、 removeClass（from）.addClass（to）；
}
函数changeCirlecolor（）{
变量c=$（'圆圈'）；
如果（c.hasClass（'red'））更改了class（c，'red'，'green'）；
否则，如果（c.hasClass（'yellow'））更改类别（c，'yellow'，'red'）；
else changeClass（c，‘绿色’、‘黄色’）
setTimeout（函数（）{
changeCircleColor（）；
}, 3000);
}
.circle{
显示：内联块；
高度：200px；
宽度：200px；
边界半径：100px；
}
.圆圈，红色{
背景色：红色；
}
.绿色{
背景颜色：绿色；
}
.黄色{
背景颜色：黄色；
}

您的浏览器控制台是否出现错误？“它不工作”是对问题的不充分描述。不，没有错误。我使用IE是因为一个项目要求，您在哪里调用函数SI？facepalm。我做了一些改进没有
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);
}