JS实现生成会变大变小的圆环实例


Posted in Javascript onAugust 05, 2015

本文实例讲述了JS实现生成会变大变小的圆环。分享给大家供大家参考。具体如下:

这里使用javascript生成圆环,会变大变小,对于研究如何利用JavaScript生成动画效果,这是个很好的范例。

运行效果如下图所示:

JS实现生成会变大变小的圆环实例

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 {width:2px; height:2px; position:absolute; background:red; left:150px; top:200px;}
div {width:3px; height:3px; position:absolute; background:black;}
</style>
<title>JS圆环</title>
<script type="text/javascript">
var n=30;
var r=100;
var a=true;
window.onload=function ()
{
 var oDiv1=document.getElementById('div1');
 var aDiv=[];
 var oDiv=null;
 var j=0;
 var i=0;
 for(i=0;i<n;i++)
 {
  oDiv=document.createElement('div');
  aDiv.push(oDiv);
  document.body.appendChild(oDiv);
 }
 calcDrg();
 function calcDrg()
 {
  for(i=0;i<n;i++)
  {
   var degress=360*i/n+j;
   var a=Math.sin(degress*Math.PI/180)*r;
   var b=Math.cos(degress*Math.PI/180)*r;
   aDiv[i].style.left=oDiv1.offsetLeft+b+'px';
   aDiv[i].style.top=oDiv1.offsetTop-a+'px';
  }
 }
 setInterval(function (){
  j++;
  var s=0.3;
  a?r-=s:r+=s;
  if(r<=0 || r>=100)
  {
   a=!a;
  }
  calcDrg();
 }, 10);
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js监听表单value的修改同步问题,跨浏览器支持
Dec 31 Javascript
让AJAX不依赖后端接口实现方案
Dec 03 Javascript
Javascript基础教程之if条件语句
Jan 18 Javascript
JavaScript删除数组元素的方法
Mar 20 Javascript
前端 Vue.js 和 MVVM 详细介绍
Dec 29 Javascript
Angular实现一个简单的多选复选框的弹出框指令实例
Apr 25 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
Feb 25 Javascript
vue移动端模态框(可传参)的实现
Nov 20 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
基于JavaScript的数据结构队列动画实现示例解析
Aug 06 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 #Javascript
JavaScript实现节点的删除与序号重建实例
Aug 05 #Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 #Javascript
JS+CSS实现表格高亮的方法
Aug 05 #Javascript
jquery实现实时改变网页字体大小、字体背景色和颜色的方法
Aug 05 #Javascript
JavaScript节点及列表操作实例小结
Aug 05 #Javascript
使用coffeescript编写node.js项目的方法汇总
Aug 05 #Javascript
You might like
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
php函数连续调用实例分析
2015/07/30 PHP
thinkphp5.1 框架钩子和行为用法实例分析
2020/05/25 PHP
定义select的边框颜色
2008/04/28 Javascript
javascript针对DOM的应用实例(一)
2012/04/15 Javascript
javascript 三种方法实现获得和设置以及移除元素属性
2013/03/20 Javascript
js拖拽一些常见的思路方法整理
2014/03/19 Javascript
JavaScript数值数组排序示例分享
2014/05/27 Javascript
jQuery设置和获取HTML、文本和值示例
2014/07/08 Javascript
AngularJS中取消对HTML片段转义的方法例子
2015/01/04 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
2017/02/21 Javascript
利用JavaScript在网页实现八数码启发式A*算法动画效果
2017/04/16 Javascript
Node.js利用console输出日志文件的方法示例
2018/04/27 Javascript
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
Bootstrap实现模态框效果
2019/09/30 Javascript
[01:29:31]VP VS VG Supermajor小组赛胜者组第二轮 BO3第一场 6.2
2018/06/03 DOTA
实例讲解Python编程中@property装饰器的用法
2016/06/20 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
python3.6实现学生信息管理系统
2019/02/21 Python
python dumps和loads区别详解
2020/02/04 Python
python爬虫容易学吗
2020/06/02 Python
python 读取、写入txt文件的示例
2020/09/27 Python
健康监测猫砂:Pretty Litter
2017/05/25 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
Python使用openpyxl复制整张sheet
2021/03/24 Python
财务会计专业毕业生自荐信
2013/10/02 职场文书
统计系教授推荐信
2014/02/28 职场文书
《宿建德江》教学反思
2014/04/23 职场文书
经济信息系毕业生自荐信
2014/06/02 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
追悼会家属答谢词
2015/09/29 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
python入门之算法学习
2021/04/22 Python