时间:2021-05-26
本文实例为大家分享了js实现小球沿正弦曲线运动的具体代码,供大家参考,具体内容如下
效果图:
代码:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .dot{ margin-top: 300px; position: absolute; width: 1px; height: 1px; background: #000000; } #ball{ width: 10px; height: 10px; background: red; border: 1px solid red; position: absolute; border-radius: 10px; } </style></head><body> <div style="position: relative; width: 600px;height: 600px; border: 1px solid #000000" id="draw_bo" ></div><div id="ball" ></div><script type="text/javascript"> var dom=document.getElementById("draw_bo"); var ball=document.getElementById("ball"); var x=0,y=300; ball.style.left=x+"px";//小球初始坐标x ball.style.top=y+"px";//小球初始坐标y for(var angle=0;angle<600;angle+=0.01){//画正弦线 var childDot=document.createElement('div'); childDot.className='dot'; childDot.style.top=300*(Math.sin(angle*Math.PI/300))+"px"; childDot.style.left=angle+"px"; dom.appendChild(childDot); } var time=setInterval(function () { x=x+5;//小球运动速度 y=Math.floor(Math.sin(x/600*2*Math.PI)*300)+300;//小球运动的高度 if(x>600) x=0; ball.style.left=x+"px"; ball.style.top=y+"px"; },100);</script></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
CAXA电子图板如何画正弦曲线呢?此款软件是一个开放的二维CAD平台,可以绘制出各种不同机械工程的设计图纸,正弦曲线作为经常使用的函数公式,可以直接在用公式曲线
先奉上正弦曲线的:@echooff&setlocalenabledelayedexpansion(:loopfor%%iin(30465559605955463
写了个多层感知器,用bp梯度下降更新,拟合正弦曲线,效果凑合。#-*-coding:utf-8-*-importnumpyasnpimportmatplotli
常见的,物体/图片做抛物线或者更准确的说是沿贝塞尔曲线运动是H5开发中常见的需求,那么如何快速的根据设计稿计算出运动路径是开发者首要解决的问题.我这边H5开发常
excel如何根据表格里的数据绘制曲线图?下面小编带来excel曲线图绘制方法,有兴趣的朋友一起来看看吧。excel曲线图绘制方法:绘制正弦曲线:由于我们要生成