JS特效:红绿灯

HTML

  <img src="img/none.png" alt="" id="none">
  <img src="img/red.png" alt="" id="red">
  <img src="img/yellow.png" alt="" id="yellow">
  <img src="img/blue.png" alt="" id="blue">
  <button id="change">点我</button>

CSS

    img:nth-child(n+2) {
      display: none;
    }

JS代码

    window.onload = function() {
      var change = document.getElementById("change");
      var none = document.getElementById("none");
      var red = document.getElementById("red");
      var yellow = document.getElementById("yellow");
      var blue = document.getElementById("blue");
      change.onclick = function() {
        if (none.style.display != "none") {
          red.style.display = "inline";
          none.style.display = "none";
        } else if (red.style.display != "none") {
          yellow.style.display = "inline";
          red.style.display = "none";
        } else if (yellow.style.display != "none") {
          blue.style.display = "inline";
          yellow.style.display = "none";
        } else {
          none.style.display = "inline";
          blue.style.display = "none";
        }
      };
    };

分析待续

图片资料

none.png
red.png
yellow.png
blue.png

另种解法

<style>
    .hidden {
      display: none;
    }
    
    .show {
      display: inline;
    }

  </style>
  <script>
    window.onload = function() {
      var change = document.getElementById("change");
      var none = document.getElementById("none");
      var red = document.getElementById("red");
      var yellow = document.getElementById("yellow");
      var blue = document.getElementById("blue");
      change.onclick = function() {
        if (none.className == "show") {
          red.className = "show";
          none.className = "hidden";
        } else if (red.className == "show") {
          yellow.className = "show";
          red.className = "hidden";
        } else if (yellow.className == "show") {
          blue.className = "show";
          yellow.className = "hidden";
        } else {
          none.className = "show";
          blue.className = "hidden";
        }
      };
    };

  </script>
</head>

<body>

  <img src="img/none.png" alt="" id="none" class="show">
  <img src="img/red.png" alt="" id="red" class="hidden">
  <img src="img/yellow.png" alt="" id="yellow" class="hidden">
  <img src="img/blue.png" alt="" id="blue" class="hidden">
  <button id="change">点我</button>

</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容