lovecoding
/
web0331


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        position: absolute;
      }
    </style>
  </head>
  <body>
    <script>
      var screenWidth =
        document.documentElement.clientWidth || document.body.clientWidth;
      var screenHeight =
        document.documentElement.clientHeight || document.body.clientHeight;
      function Leaf() {
        // 图片的宽度
        this.width1 = Math.random() * 100 + 100;
        // 距离顶部的位置
        this.top1 = 0;
        // 距离左侧的位置
        this.left1 = Math.random() * (screenWidth - this.width1);
        // 图片的路径
        this.img1 = "./img/" + Math.floor(Math.random() * 4 + 1) + ".png";
      }
      Leaf.prototype.init = function () {
        var imgs = document.createElement("img");
        imgs.style.width = this.width1 + "px";
        imgs.src = this.img1;
        imgs.style.left = this.left1 + "px";
        imgs.style.top = this.top + "px";
        this.myImg = imgs;
        document.body.appendChild(imgs);
      };
      var failList = []
      for (var i = 0; i < 20; i++) {
        var newLeaf = new Leaf();
        failList.push(newLeaf)
        newLeaf.init();
      }

      Leaf.prototype.fail = function () {
        // console
        setTimeout(
          function () {
            var timer = setInterval(
              function () {
                if (
                  this.myImg.offsetTop <
                  screenHeight - this.myImg.offsetHeight
                ) {
                  this.myImg.style.top = this.myImg.offsetTop + 10 + "px";
                } else {
                  clearInterval(timer);
                }
              }.bind(this),
              20
            );
          }.bind(this),
          Math.random()*3000
        );
      };

      document.onclick = function () {
        for(var i=0;i<failList.length;i++) {
            failList[i].fail()
        }
      };
    </script>
  </body>
</html>