圆周运动js

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>circlar movement</title>

<style type="text/css">

#circle{width:30px;height:30px;position: absolute;background-color: lightgreen;left:600px;top:250px;border-radius: 50%;}

</style>

<script type="text/javascript">

window.onload=function(){

var oCircle=document.getElementById(‘circle‘);

var x=500;

var y=200;

var r=100;

var num=0;

setInterval(function(){

num++;

a=Math.sin(num*(Math.PI/180))*r;

b=Math.cos(num*(Math.PI/180))*r;

oCircle.style.left=x+b+‘px‘;

oCircle.style.top=y+a+‘px‘;

},35);

}

</script>

</head>

<body>

<div id="circle"></div>

</body>

</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-11-05 06:28:13

圆周运动js的相关文章

原生JS实现圆周运动

<body> <div id="ball" style="width:20px; height:20px; background:red; border-radius:50%; position:absolute; left:0; top:80px;"></div> <script> var ball = document.getElementById("ball"); var radian = 0

P2.JS之旋转约束(RevoluteConstraint)备忘

作用:物体可以绕着所设置的锚点作旋转运动.用途:车轮. 先上段代码: 1 var r1 = new p2.RevoluteConstraint (holderBody, circleBody, { 2 worldPivot : [0, 5] 3 //localPivotA: [1, -1], 4 //localPivotB: [0, 0] 5 }); 6 r1.enableMotor() ; 7 r1.setMotorSpeed( 5); 8 world.addConstraint(r1) ;

论js结合数学的应用

js是一门应用极其广泛的语言,它直接决定着一个前端工程师水平以及工资的高低,今天,本人这个前端菜鸟就来总结写js怎样结合数学进行应用. 一:结合勾股定理进行苹果菜单的开发 首先来介绍几个常用的公式 1:平方公式 Math.pow(a,b);代表的是a的b次方: 2:开方公式 Math.sqrt(a,b)代表的是a开b次方: 下面就以苹果实例的开发来讲述其应用 这是html代码 1 <input typ="text"> 2 <input typ="text&q

阿里校招:前端线上笔试题--页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动

题目: 请让页面中的一个元素(10px*10px)围绕坐标(200, 300) 做圆周运动: <html> <head> <style type="text/css"> .item{ width:20px; height:20px; border-radius:10px; background: blue; position: absolute; }/*border-radius圆角半径*/ #point{ left:95px; top:295px;

Three.js 学习笔记(1)--坐标体系和旋转

前言 JavaScript 3D library The aim of the project is to create an easy to use, lightweight, 3D library. The library provides <canvas>, <svg>, CSS3D and WebGL renderers.(该项目的目标是创建一个易于使用,轻量级的3D库.该库提供了<canvas>,<svg>,CSS3D和WebGL渲染器.) 示例 

【API】高德地图API JS实现获取坐标和回显点标记

1.搜索+选择+获取经纬度和详细地址 2.回显数据并点标记 3.实现 第一步:引入资源文件 <!--引入高德地图JSAPI --><script src="//webapi.amap.com/maps?v=1.3&key=在官网申请一个key"></script><!--引入UI组件库(1.0版本) --><script src="//webapi.amap.com/ui/1.0/main.js">

js跨域

第一次写博客,好紧张,不知道能写成啥样,哈哈哈. 自己的一知片解,有错请多多指教,嘻嘻嘻. 一.何为跨域? 只要协议.域名.端口后任何一个不同,就是跨域. 举个例子: http://www.example.com 协议不同 https://www.example.com http://www.example.com 域名不同 http://www.test.com http://www.example.com 端口不同 http://www.example.com:81 注意:ip相同,域名不同

Vue.js学习笔记:属性绑定 v-bind

v-bind  主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如: <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> 绑定HTML Class 一.对象语法: 我们可以给v-bind:class 一个对象,以动态地切换class.注意:v-bind:class指令可以与普通的class特

node.js的安装及配置

一.安装 直接在浏览器搜索node.js,在官网上下载(一般旧版的更加稳定,比如下载4.4.7版本) 点击DOWNLOADS 往下翻,点击Previous Release Windows下载msi(64位/32位) 根据提示一步步安装,安装之后的文件夹如下: 在cmd命令行下输入node -v,如果出现如下,说明安装成功: 二.关于配置 在安装路径下新建两个文件夹: 创建完两个空文件夹之后,打开cmd命令窗口,输入 npm config set prefix "D:\Program Files