抛物线运动解释：

以右开口为例，根据公式  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. 平面图转对偶图&19_03_21校内训练 [Everfeel]

    对于每个平面图,都有唯一一个对偶图与之对应.若G‘是平面图G的对偶图,则满足: G'中每一条边的两个节点对应着G中有公共边的面,包括最外部无限大的面. 直观地讲,红色标出来的图就是蓝色标出的图的对偶图 ...

  2. HanLP自然语言处理包介绍

    支持中文分词(N-最短路分词.CRF分词.索引分词.用户自定义词典.词性标注),命名实体识别(中国人名.音译人名.日本人名.地名.实体机构名识别),关键词提取,自动摘要,短语提取,拼音转换,简繁转换, ...

  3. 异步IO（协程，消息循环队列）

    同步是CPU自己主动查看IO操作是否完成,异步是IO操作完成后发出信号通知CPU(CPU是被通知的) 阻塞与非阻塞的区别在于发起IO操作之后,CPU是等待IO操作完成再进行下一步操作,还是不等待去做其 ...

  4. 打开和写入word文档

    一. 使用win32读取word内容 # -*- coding: utf-8 -*- from win32com import client as wc def readDocx2(): word = ...

  5. Windows server 2016 安装 TFS

    一:准备: 1.1下载TFS https://visualstudio.microsoft.com/zh-hans/tfs/ 1.2 下载SQL2017 http://msdn.itellyou.cn ...

  6. DevExpress v18.1新版亮点——CodeRush for VS篇（一）

    用户界面套包DevExpress v18.1日前正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了CodeRush for Visual Studio v18.1 的新功能,快来下载试 ...

  7. SUSE_LINUX 11 SP3 安装 IBM MQ 7.5

    0.环境介绍 mq7.5 suse linux 11 1. 上传安装包 上传安装包到 softWare/CI79IML.tar.gz 2. 安装证书 sh ./mqlicense.sh 输入 1 同意 ...

  8. Linux文件系统命令 mv

    命令名:mv 功能:移动一个文件,从一个位置到另外一个位置. 用法:mv source_dir dist_dir eg: renjg@renjg-HP-Compaq-Pro--MT:/var/tmp$ ...

  9. url中特殊符号转换

    特殊符号 url中显示 空格 %20 & %26

  10. 判断终端是ios还是android来加载不同的样式

    <script type="text/javascript"> var addStyleLink = function(href){ var head = docume ...