摇起来/随机

最新推荐文章于 2025-06-05 09:38:15 发布

原创最新推荐文章于 2025-06-05 09:38:15 发布 · 132 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#setInterval #random #clearInterval #随机

webapi 专栏收录该内容

35 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript实现的简单动画效果，通过两个按钮控制一个包含两张图片的div元素在页面上随机移动。动画效果通过设置div元素的left和top属性实现，点击“摇起来”按钮启动动画，点击“停止”按钮则停止动画。

<!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/heihei.jpg" alt=""/>
  <img src="images/lyml.jpg" alt=""/>
</div>
<script src="common.js"></script>
<script>
  //点击按钮摇起来
  var timeId="";
  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>