JS setInterval(） 只触发一次

JS setInterval() firing only once

本文关键字：一次 setInterval JS      更新时间：2023-09-26

<html>
<head>
  <script type="text/javascript">
    function topdiv() {
      var z = document.createElement("DIV");
      z.id = "top";
      z.style = "background-color:yellow; width:100%; height:50px; opacity: 1.0";
      z.class = "top";
      document.body.appendChild(z);
    }
    function animateDiv() {
      var d = document.getElementById("top");
      if (d.style.opacity == "0.0") {
        d.style.opacity = "1.0";
      } else {
        d.style.opacity = "0.0";
      }
    }
  </script>
</head>
<body onload="topdiv()">
  <script type="text/javascript">
    var xyz = setInterval(function() {
      animateDiv()
    }, 300);
  </script>
</body>
</html>

我在我的代码中使用 setInterval 在 30 毫秒后不断更改div 的不透明度，但该函数只执行一次。有人可以帮我解决吗？

更改

if (d.style.opacity == "0.0")

自：

if (d.style.opacity === "0")

http://plnkr.co/edit/eWFDo9OJrYzK3ahz1EBG?p=preview

因为您正在使用 CSS 设置初始不透明度，所以您需要查看计算样式。而不是那样做;在元素本身的代码中设置不透明度。

以防万一浏览器确实返回字符串值，请在比较之前将其强制转换为数字。您还可以将不透明度设置为数字。

看看这个：

<html>
<head>
  <script type="text/javascript">
    function topdiv() {
      var z = document.createElement("DIV");
      z.id = "top";
      z.style = "background-color:yellow; width:100%; height:50px; opacity: 1.0";
      z.style.opacity = 1;
      z.class = "top";
      document.body.appendChild(z);
    }
    function animateDiv() {
      var d = document.getElementById("top");
      if (+d.style.opacity == 0) {
        d.style.opacity = 1;
      } else {
        d.style.opacity = 0;
      }
    }
  </script>
</head>
<body onload="topdiv()">
  <script type="text/javascript">
    var xyz = setInterval(function() {
      animateDiv()
    }, 300);
  </script>
</body>
</html>

相关文章：