抛物线运动解释：

以右开口为例，根据公式  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);

 }

 window.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

 window.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>

js实现一条抛物线的更多相关文章

  1. js 实现分割条

    js 实现 切分条效果, 为了熟悉js  写法,纯javascript 脚本编写 简单介绍几个函数: setCapture()函数的作用就是将后续的mouse事件都发送给这个对象, releaseCa ...

  2. nprogress.js 头部进度条使用方法

    nprogress.js 头部进度条 引入CSS\JS <link rel="stylesheet" type="text/css" href=" ...

  3. js 实现进度条功能。

    /** * 纯js进度条 * Created by kiner on 15/3/22. */ function progress(options){ this.w = (options &&a ...

  4. three.js 显示一条线

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. Js 百分比进度条

    [构想] CSS3 + JS CSS3控制进度 利用CSS3中的 @keyframes JS实现百分比 根据CSS来调整,时间 [页面代码] 第一种: 默认直接进入就是下载 CSS代码 body { ...

  6. js加载条

    <html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv=" ...

  7. js 设置多条css样式

    如果在一个网页中给id="mydiv"的元素添加css样式,先获取该节点:var obj = document.getElementById("mydiv"); ...

  8. php+js进度读取条

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  9. js控制进度条到达100%跳转界面一

    进度条一般在手机上用到的比较广泛,刚好最近的项目也是一直在做手机站,这个特效是手机端的一个界面,现在我把改成pc端了,进度条的快慢速度和样式可自行调节,改动也是很方便的,不多说,看代码: <st ...

随机推荐

  1. linux下 gogs的安装和web钩子

    linux系统下 gogs下载安装以及web钩子的使用 (1)下载gogs  官方网址:https://dl.gogs.io/ 选择合适的版本,解压后就可以使用了 启动gogs的命令:  ./gos ...

  2. 卷积与反卷积以及步长stride

    1. 卷积与反卷积 如上图演示了卷积核反卷积的过程,定义输入矩阵为 I(4×4),卷积核为 K(3×3),输出矩阵为 O(2×2): 卷积的过程为:Conv(I,W)=O 反卷积的过称为:Deconv ...

  3. JNA调用DLL（入门）：让你一眼就学会

    DLL(Dynamic Link Library)文件,是基于C语言的动态链接库文件,就是一些封装好的方法,打成dll格式包,供别人调用 JNA是一种能够使Java语言使调用DLL的一种技术, 首先, ...

  4. elasticsearch基本操作之--使用QueryBuilders进行查询

    /** * 系统环境: vm12 下的centos 7.2 * 当前安装版本: elasticsearch-2.4.0.tar.gz */ QueryBuilder 是es中提供的一个查询接口, 可以 ...

  5. 如何查看.java文件的字节码（原码）

    出自于:https://www.cnblogs.com/tomasman/p/6751751.html 直接了解foreach底层有些困难,我们需要从更简单的例子着手.下面上一个简单例子: 1 pub ...

  6. IOCP IO完成端口

    一. IO完成端口概念 IO完成端口的出现是为了解决并发模型中可运行线程上下文切换开销过大而出现的. 在<Windows核心编程>的描述中,IO完成端口是Wnidows系统提供的最复杂的内 ...

  7. 201621123001 《java程序设计》第2周学习总结

    1. 本周学习总结 学会String 类的一些用法,比如用subString()截取字符串,频繁对字符串进行修改应使用StringBuilder()等. 学会Array 类的一些用法,比如sort() ...

  8. SQL--数据表--基本操作

    表操作 表与字段是密不可分的. 新增数据表 Create table [if not exists] 表名(字段名字 数据类型,字段名字 数据类型 --最后一行不需要逗号) [表选项] ; if no ...

  9. MVC实现上传图片的方法

    Form提交时,须注意form需要添加属性enctype="multipart/form-data",否则Request.Files.Count=0,无法上传图片. cshtml代 ...

  10. <Java><类与对象><OOP>

    Overview 类 封装(encapsulation): 也称为数据隐藏.从形式上看,是将数据与行为组合起来,并对对象的使用者隐藏了数据的实现方式.封装给对象赋予了黑盒特征,提高重用性和可靠性. 继 ...