原生js怎么实现弹动小球效果

2023-06-30 00:06:51 420人浏览薄情痞子

摘要

这篇文章主要介绍了原生js怎么实现弹动小球效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇原生js怎么实现弹动小球效果文章都会有所收获，下面我们一起来看看吧。效果如下源码展示<!doctype

这篇文章主要介绍了原生js怎么实现弹动小球效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇原生js怎么实现弹动小球效果文章都会有所收获，下面我们一起来看看吧。

效果如下

原生js怎么实现弹动小球效果

源码展示

<!doctype html><html><head><meta charset="utf-8"><title>弹弹球（原生js）</title> <style>* {    margin:0;    padding:0;    font-family:Microsoft YaHei,serif;}li {    list-style:none;}.ball {    position:absolute;    top:0;    left:0;    width:100px;    height:100px;    background:pink;    border-radius:50%;}</style></head><body><div></div> <script>  play(10);   function play(num) {      //生成num个div      for (var i = 0; i < num; i++) {          var Div = document.createElement("div");          Div.className = "ball";          Div.leftVal = 3 + i; //预存每个球的初始速度          Div.topVal = 3 + i; //预存每个球的初始速度          Div.style.backgroundColor = randomC();          document.body.appendChild(Div);      }       var aBall = document.querySelectorAll(".ball");      maxTop = document.documentElement.clientHeight - aBall[0].clientHeight, //获取top的最大值          maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //获取left的最大值       window.onresize = function() {          maxTop = document.documentElement.clientHeight - aBall[0].clientHeight; //获取top的最大值          maxLeft = document.documentElement.clientWidth - aBall[0].clientWidth; //      };       auto();       function auto() {          for (var i = 0; i < num; i++) {              var Ball = aBall[i],                  startL = Ball.offsetLeft, //取每个球的初始left和TOP值                  startT = Ball.offsetTop, //取每个球的初始left和TOP值                  Left = startL + Ball.leftVal, //改变，每个球的left和top值                  Top = startT + Ball.topVal; //改变，每个球的left和top值                if (Left >= maxLeft || Left <= 0) {                  Left = Math.min(Left, maxLeft); //限制Left的最大值                  Left = Math.max(Left, 0); //限制最小值                   Ball.leftVal = -Ball.leftVal;                  Ball.style.backgroundColor = randomC();               }              if (Top >= maxTop || Top <= 0) {                  Ball.topVal = -Ball.topVal;                   Top = Math.min(Top, maxTop); //限制Left的最大值                  Top = Math.max(Top, 0); //限制最小值                  Ball.style.backgroundColor = randomC();              }                Ball.style.top = Top + "px";              Ball.style.left = Left + "px";          }          requestAnimationFrame(auto)       }      // rgb(0-255)      function randomC() {          var r = Math.floor(Math.random() * 256),              g = Math.floor(Math.random() * 256),              b = Math.floor(Math.random() * 256);          return "rgb(" + r + "," + g + "," + b + ")";      }   }</script> </body></html>

关于“原生js怎么实现弹动小球效果”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“原生js怎么实现弹动小球效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网精选频道。

--结束END--

本文标题: 原生js怎么实现弹动小球效果

本文链接: https://lsjlt.com/news/326907.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341