JS---案例：点击按钮摇起来 & 星星闪动 （挺难看的）

案例1：点击按钮摇起来

 

思路：

1. 2张图片，放进div里面，摇起来的本质是，此div按上下左右的位置和在一定的时间内发生移动

2. 所以用随机数的概念来实现位置的移动，用setInterval来实现一定的时间区间，前者封装在后者的处理 函数里面。最后全部作为点击按钮的点击事件的处理函数

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    img {
      width: 200px;
      height: 200px;
    }

    div {
      position: absolute;
    }
  </style>
</head>

<body>
  <input type="button" value="点击摇起来" id="btn1" />
  <input type="button" value="停止" id="btn2" />
  <div id="dv">
    <img src="images/tianshi.gif" alt="" />
    <img src="images/bird.png" alt="" />
  </div>
  <script src="common.js"></script>
  <script>
    //div摇动起来，本质是样式里面的上下，左右，移动一个随机值 Math.ramdom
    //并且在一个设定的时间区间内移动 setInterval
    //点击按钮摇起来

    my$("btn1").onclick = function () {
      timeId = setInterval(function () {
        //随机数
        var x = parseInt(Math.random() * 100 + 1);
        var y = parseInt(Math.random() * 100 + 1)
        //设置元素的left和top属性
        my$("dv").style.left = x + "px";
        my$("dv").style.top = y + "px";
      }, 100);
    };

    my$("btn2").onclick = function () {
      clearInterval(timeId);
    };
  </script>
</body>

</html>

 

效果：

 

 

案例2：星星闪动

思路：

和上个案例基本是同一个原理。这里都一个对象.innerHTML在div里面创建了个span, span里面放了个星星，然后让星星在范围更大的随机数值里面移动，时间设置短一些。

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    div {
      width: 600px;
      height: 600px;
      border: 2px solid yellow;
      background-color: black;
      position: relative;
    }

    span {
      font-size: 30px;
      color: yellow;
      position: absolute;
    }
  </style>
</head>

<body>
  <input type="button" value="亮起来" id="btn" />
  <div id="dv"></div>
  <script src="common.js"></script>
  <script>
    my$("btn").onclick = function () {
      setInterval(function () {
        my$("dv").innerHTML = "<span>★</span>";
        var x = parseInt(Math.random() * 600 + 1);
        var y = parseInt(Math.random() * 600 + 1);
        my$("dv").firstElementChild.style.left = x + "px";
        my$("dv").firstElementChild.style.top = y + "px";
      }, 100);
    };
  </script>

</body>

</html>

 

效果：

posted @ 2019-12-11 23:22  jane_panyiyun  阅读(613)  评论(4)  编辑  收藏  举报