利用原生JavaScript--实现小球无限转圈

实现效果：一个小球无限制的转动（转动速度利用requestAnimationFrame根据自己的系统，来实现）。

1.首先写html部分，代码部分灰常简单，看下图哦

 <!-- 圆心 --><div class="ponit"></div> <!-- 轨道 --><div class="jin"></div><!-- 移动的圆圈 --><div class="call"></div>

2.写好了HTML之后再把相关的样式完成，这里的样式不定，可以根据自己的观点来设置样式，（具体写法看下图）

        .ponit {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 50%;width: 20px;height: 20px;background-color: rgb(152, 203, 49);}.jin {position: absolute;left: 50%;top: 50%;border-radius: 50%;width: 600px;height: 600px;border: 1px solid red;transform: translate(-50%, -50%);}.call {position: absolute;width: 50px;height: 50px;transform: translate(-50%, -50%);border-radius: 50%;background-color: rgb(29, 138, 129);}

3.下面就开始写我们的javascript了。需要用到公式：角度 * Π / 180 = 弧度；

     let ange = 0 //定义角度let lastTime = new Date().getTime()const center = document.querySelector('.ponit')const ball = document.querySelector('.call')function a2r(a) {//角度 * Π / 180 = 弧度return a * Math.PI / 180}function update() {let dangciTime = new Date().getTime()// 10 是自己定义的一个值const step = 10 / ((dangciTime - lastTime) == 0 ? 16 : (dangciTime - lastTime));ange += stepif (ange > 360) {ange = 0}// XY轴const centerX = center.offsetLeft + 10const centerY = center.offsetTop + 10const X = centerX + (Math.sin(a2r(ange)) * 300)const Y = centerY - (Math.cos(a2r(ange)) * 300)ball.style.left = X + 'px'ball.style.top = Y + 'px'console.log(ange);lastTime = dangciTimerequestAnimationFrame(update)}requestAnimationFrame(update)

这样就可以实现小球的无限转动啦~~

最后的时候，也可以把轨道的圆球边框设为透明色，这样也很好看哦~

利用原生JavaScript--实现小球无限转圈相关推荐

利用原生 Javascript 实现 Delegated Event
想要实现类似于 jQuery 中类似于 .on() 中的 Delegated Event,却又不想用 jQuery 怎么破? 先看问题举个例子说明一下,有一组按钮,每当点击其中一个按钮,就把这个按钮 ...
vue利用原生javascript 将数组转换成以逗号(或任意符号)隔开的字符串
前言:有时候页面中用到表格,表格中的某个字段后端接口传的是数组,如果直接显示很不美观. 原先效果图: 目的效果图: 代码: let times= [] listData.forEach(functio ...
javascript写css样式,原生javascript实现读写CSS样式的方法详解
原生javascript实现读写CSS样式的方法详解发布于 2017-05-24 15:05:31 | 120 次阅读 | 评论: 0 | 来源: 网友投递 JavaScript客户端脚本语言Jav ...
原生JavaScript实现五色小球
原生JavaScript实现五色小球一,HTML代码 <div id="ball"></div> <script src="undersc ...
分享10个原生JavaScript技巧
首先在这里要非常感谢无私分享作品的网友们,这些代码片段主要由网友们平时分享的作品代码里面和经常去逛网站然后查看源文件收集到的.把平时网站上常用的一些实用功能代码片段通通收集起来,方便网友们学习使用,利 ...
html 监听input输入框的值,利用原生JS实时监听input框输入值
利用原生JS实时监听input框输入值原生JS中可以使用oninput,onpropertychange,onchange oninput,onpropertychange,onchange的用法 ...
打砖块小游戏php程序,利用原生js实现html5打砖块小游戏（代码示例）
本篇文章给大家通过代码示例介绍一下利用原生js实现html5打砖块小游戏的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 前言 PS:本次项目中使用了大量 es6 语法,故对于 ...
为什么说要学习全新的原生 JavaScript？
JavaScript 是前端开发工程师最重要的技能,没有之一.在 Vue.js.React.js.Koa.Echarts 等框架风靡一时的背景下,原生的 JavaScript 就可以被抛弃了吗?答案是 ...
java excel 插件_轻量级的原生JavaScript的Excel插件——JExcel
介绍 jExcel是一个轻量级的原生javascript插件,用于创建与Excel或任何其他电子表格软件兼容的基于Web的交互式表格和电子表格.可以从JS数组,JSON,CSV或XSLX文件创建在线电 ...

利用原生JavaScript--实现小球无限转圈

利用原生JavaScript--实现小球无限转圈相关推荐

最新文章

热门文章