简易抛物线代码

最新推荐文章于 2024-01-27 20:27:36 发布

zichuanhuo221

最新推荐文章于 2024-01-27 20:27:36 发布

阅读量2.4k

点赞数

本文链接：https://blog.youkuaiyun.com/zichuanhuo221/article/details/53928195

版权

本文探讨了抛物线的基本概念，并通过代码示例展示了如何在编程中实现抛物线计算。读者将学习到如何使用二次方程公式解决实际问题，例如模拟物体的抛物线运动轨迹。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	#start, #end{width:20px;height:20px;border-radius:50%;position:absolute;left:0; top:500px;}
	#start{background-color:orange;}
	#end{background-color:red;left:800px;top:300px;}
	</style>
	</head>
	<body>
	<button id="begin">开始抛物线运动</button>
	<div id="start"></div>
	<div id="end"></div>
	<script>
	// 获取dom元素
	var _start = document.getElementById("start");
	var _end = document.getElementById("end");
	var _btn = document.getElementById("begin");
	// 添加事件操作
	_btn.onclick = function() {
	// 记录起点位置
	var _src = {
	x:_start.offsetLeft,
	y:_start.offsetTop
	};
	// 记录终点位置
	var _target = {
	x:_end.offsetLeft - _start.offsetLeft,
	y:_end.offsetTop - _start.offsetTop
	};
	// 设置固定的a
	var _a = 0.002;// 通常在网页项目中，常见的曲率一般在0.001左右摆动
	// 计算出来b是多少
	var _b = (_target.y - _a_target.x_target.x)/_target.x;
	// 给水平速度赋值
	var _speedx = 0;
	// 动画计时器
	var timer = setInterval(function() {
	_start.style.left = _src.x + _speedx + "px";
	_start.style.top = _src.y + (_a_speedx_speedx + _b*_speedx) + "px";

	if(_start.offsetLeft >= _end.offsetLeft && _start.offsetTop >= _end.offsetTop) {
	clearInterval(timer);
	}
	_speedx+=5;
	}, 1);
	}
	</script>
	</body>
	</html>