Java教程

2021-09-07通过JavaScript实现小球重力回弹效果

本文主要是介绍2021-09-07通过JavaScript实现小球重力回弹效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    .cont {

      width: 1000px;

      height: 600px;

      background: #eee;

      margin: 20px auto;

      position: relative;

    }

    .box {

      width: 100px;

      height: 100px;

      background: red;

      position: absolute;

      left: 0;

      border-radius: 50%;

    }

  </style>

</head>

<body>

  <div class="cont">

    <div class="box"></div>

  </div>

</body>

<script type="text/javascript"> 

  // 1 获取节点

  let contObj = document.querySelector('.cont');

  let boxObj = document.querySelector('.box');

  // 2 设置变量

  let speed = 10;

  let g = 2;

  let times = '';

  // 小球的最大目标值

  let target = contObj.offsetHeight - boxObj.offsetHeight;

  // 3 页面点击之后小球下落

  document.onclick = () => {

    // 设置定时器

    times = setInterval(function () {

      // 3-1 给步进值添加重力

      speed += g;

      console.log(speed, '+');

      // 3-2 到达目标,停止运动

      if (boxObj.offsetTop + speed > target) {

        // 

        // 3-3 强制设置到目标

        boxObj.style.top = target + 'px'

        // 3-4 设置speed为负

        speed = -(speed * 0.8);

        // console.log(speed, '-');

        // 3-5 判断speed小于1,则停止定时器

        if (Math.abs(speed) < 1) clearInterval(times);

      } else {


 

        boxObj.style.top = boxObj.offsetTop + speed + 'px';

      }

    }, 30)


 

  }

</script>

</html>

这篇关于2021-09-07通过JavaScript实现小球重力回弹效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航