欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS---案例:点击按钮摇起来 & 星星闪动 (挺难看的)

程序员文章站 2022-08-08 15:33:04
案例1:点击按钮摇起来 思路: 1. 2张图片,放进div里面,摇起来的本质是,此div按上下左右的位置和在一定的时间内发生移动 2. 所以用随机数的概念来实现位置的移动,用setInterval来实现一定的时间区间,前者封装在后者的处理 函数里面。最后全部作为点击按钮的点击事件的处理函数

案例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>

 

效果:

 

JS---案例:点击按钮摇起来 & 星星闪动 (挺难看的)

 

案例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>

 

效果:

JS---案例:点击按钮摇起来 & 星星闪动 (挺难看的)