https://www.mianshigee.com/note/detail/84217mqk
    https://blog.csdn.net/weixin_67846341/article/details/123654219

    1. <!DOCTYPE >
    2. <html>
    3.     <head>
    4.         <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    5.         <style>
    6.             /*给body进行flex布局，实现垂直居中*/
    7.             body {
    8.                 min-height: 100vh; /*高度适应浏览器高度*/
    9.                 display: flex;
    10.                 justify-content: center; /*水平居中*/
    11.                 align-items: center; /*垂直居中*/
    12.                 font-size: 20px;
    13.             }
    14.             /*设置运动区域*/
    15.             #bg {
    16.                 width: 600px;
    17.                 height: 600px;
    18.                 border: 2px solid #e0e0e0;
    19.                 border-radius: 4px; /*给div设置圆角*/
    20.                 padding: 20px;
    21.             }
    22.             /*生成小球，并定义初始位置*/
    23.             #ball {
    24.                 border-radius: 50%; /*可把正方形变成圆形，50%即可*/
    25.                 background: #e0e0e0;
    26.                 width: 60px;
    27.                 height: 60px;
    28.                 position: relative;
    29.                 top: 30px;
    30.                 left: 30px;
    31.             }
    32.             button {
    33.                 width: 80px;
    34.                 height: 30px;
    35.                 border-radius: 4px;
    36.                 color: #fff;
    37.                 background: #aa7ecc;
    38.                 font-size: 20px;
    39.                 font-weight: bold;
    40.                 margin-left: 20px;
    41.             }
    42.         </style>
    43.     </head>
    44.     <body>
    45.         <div id="bg">
    46.             此时水平速度为：4 <button onclick="start()">演示</button>
    47.             <div id="ball"></div>
    48.         </div>
    49.         <script type="text/javascript">
    50.             function start() {
    51.                 var x,
    52.                     y,
    53.                     k = 1,
    54.                     t
    55.                 //x是水平方向移动路径；y是垂直方向的；k记录次数，可与0.1相乘得时间；t记录setInterval的返回id，用于clearInterval
    56.                 t = setInterval(function () {
    57.                     x = 30 + 0.1 * k * 4 * 100
    58.                     //S(x)=S(0)+t*V(x)，100是自定义的米到px转换数
    59.                     y = 30 + (1 / 2) * 9.8 * 0.1 * k * 0.1 * k * 100 //S(y)=S(0)+1/2*g*t*t
    60.                     var j = document.getElementById('ball')
    61.                     //通过修改小球的top和left，修改小球的位置
    62.                     j.style.top = y
    63.                     j.style.left = x
    64.                     k++ //每次调用，k自增，简化计算
    65.                     if (x > 480 || y > 480) {
    66.                         clearInterval(t) //小球达到边界时，清除setInterval
    67.                     }
    68.                 }, 10) //每0.1s调用一次setInterval的function
    69.             }
    70.         </script>
    71.     </body>
    72. </html>