抛物线运动解释:
以右开口为例, 根据公式 y^2 = 2px . 确定 p 的值, 已知 x 求 y.
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="utf-8" />
- <title>
- </title>
- </head>
- <body style="width:100%; min-width:600px; height:100%; min-height:500px;">
- <input id="btn" type="button" value="画抛物线" />
- </body>
- <script type="text/javascript">
- function $(id) {
- return document.getElementById(id);
- }
- Windows.onload = function() {
- $("btn").onclick = function() {
- let p = 200;
- //let x = 1000;//x 的初值
- let x = -300;
- let myTimer = setInterval(function() {
- x++;
- if (x > 300) { //x 的结束值
- //x 是从大到小的变化
- // 根据 x 的值求 y (根据公式: y^2=2px)x^2 = -2py
- Windows.clearInterval(myTimer);
- return;
- }
- // y= Math.sqrt(2*p*x);
- // x = (y*y)/(2*p) +100;
- y = (x * x) / (2 * p) + 200;
- // 用 div 模拟画个点 (x,y 为圆心, 半径为 2.5)
- let divDom = document.createElement("div");
- divDom.style.position = "absolute";
- divDom.style.left = (x + 320 - 2.5) + "px";
- divDom.style.top = (y - 2.5) + "px";
- divDom.style.width = "5px";
- divDom.style.height = "5px";
- divDom.style.borderRadius = "50%";
- divDom.style.backgroundColor = "red";
- document.body.appendChild(divDom);
- },
- 5); // 每隔 5 毫米画个点
- }
- }
- </script>
- </HTML>
来源: http://www.bubuko.com/infodetail-2965699.html