JS小案例：循环间隔重复变色

在A、B、C三个区块中，有且仅有一个红色，要求红色每隔一秒即进入下一个区块，变色过程不断循环往复。

参考代码：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>JS小案例：循环变色的区块</title>
  <style>
    .div {
      width: 100px;
      height: 100px;
      margin: 50px;
      border: 1px black solid;
      float: left;
    }

    .red {
      background: red;
    }
  </style>
  <script>
    window.onload = function () {
      var aDiv = document.getElementsByClassName('div');
      var start = 0;
      var timer = setInterval(function () {
        start++;
        if (start > 2) {
          start = 0;
        }
        for (var i = 0; i < aDiv.length; i++) {
          aDiv[i].className = 'div';
        }
        aDiv[start].className = 'div red';

      }, 1000);
    }
  </script>
</head>

<body>
  <div class='div red'></div>
  <div class='div '></div>
  <div class='div '></div>
</body>

</html>

　　

posted @ 2019-07-22 17:25  请叫我二狗哥  阅读(929)  评论(0)    收藏  举报