Chinaunix首页 | 论坛 | 博客

zhanfeng0102的ChinaUnix博客zhanfeng.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

zhanfeng0102

  • 博客访问： 47135
  • 博文数量： 34
  • 博客积分： 831
  • 博客等级： 军士长
  • 技术积分： 310
  • 用 户 组： 普通用户
  • 注册时间： 2012-10-08 11:15
文章分类

全部博文（34）

文章存档

2012年（34）

我的朋友
最近访客
推荐博文
相关博文
圆周运动

分类： 系统运维

2012-10-08 17:59:49

MicrosoftInternetExplorer402DocumentNotSpecified7.8Normal0

今天学了Math对象，发现通过Math对象可以使物体做圆周运动。

其实圆周运动的原理很简单：就是物体沿圆周运动，只要让left=math.sin(弧度)

Top=math.cos(弧度)。

代码实现了可复用，复用主要是使用了数组和for循环。

代码如下：


点击(此处)折叠或打开

  1. 　　<!DOCTYPE html>
  2. 　　<html>
  3. 　　<head>
  4. 　　    <meta charset="utf-8" />
  5. 　　    <title> new document </title>
  6. 　　    <meta name="keywords" content="" />
  7. 　　    <meta name="description" content="" />
  8. 　　    <style>
  9. 　　        #out{height:200px;width:400px;margin:100px auto;position:relative;}
  10. 　　    </style>
  11. 　　</head>
  12. 　　<body>
  13. 　　    <div id="out" >
  14. 　　    <div style="height:30px;width:30px;position:absolute;border:1px red solid;">1</div>
  15. 　　    <div style="height:30px;width:30px;position:absolute;border:1px blue solid;">2</div>
  16. 　　    <div style="height:30px;width:30px;position:absolute;border:1px black solid;">3</div>
  17. 　　    <input type="button" value="开始" style="height:30px;width:50px;margin-left:60px;" id="ipt1">
  18. 　　    <input type="button" value="停止" style="height:30px;width:50px;" id="ipt2">
  19. 　　    </div>
  20. 　　    <script type="text/javascript">
  21. 　　        var x,y;
  22. 　　        var a=true;
  23. 　　        var x1=new Array();
  24. 　　        var y1=new Array();
  25. 　　        var du=new Array();
  26. 　　        var h=new Array();
  27. 　　        var w=new Array();
  28. 　　        var out=document.getElementById('out');
  29. 　　        var divs=out.getElementsByTagName('div');
  30. 　　        var num=divs.length;
  31. 　　        var du1=360/num;
  32. 　　        for(var i=0;i<divs.length;i++){
  33. 　　            x1[i]=200*Math.sin(Math.PI*(i*du1)/180);
  34. 　　            y1[i]=100*Math.cos(Math.PI*(i*du1)/180);
  35. 　　            divs[i].style.left=x1[i]+"px";
  36. 　　            divs[i].style.top=y1[i]+"px";
  37. 　　            du[i]=i*du1;
  38. 　　            divs[i].style.height=(y1[i]+150)*0.5+'px';
  39. 　　            divs[i].style.width=(y1[i]+150)*0.5+'px';
  40. 　　        }
  41. 　　        function move(){        
  42. 　　            for(var i=0;i<divs.length;i++){
  43. 　　                du[i]+=1;            
  44. 　　                x=200*Math.sin(Math.PI*du[i]/180);
  45. 　　                y=100*Math.cos(Math.PI*du[i]/180);
  46. 　　                divs[i].style.left=x+"px";
  47. 　　                divs[i].style.top=y+"px";
  48. 　　                divs[i].style.height=(y+150)*0.5+'px';
  49. 　　                divs[i].style.width=(y+150)*0.5+'px';                
  50. 　　            }            
  51. 　　        }
  52. 　　        var t;
  53. 　　        var ipt1=document.getElementById('ipt1');
  54. 　　        var ipt2=document.getElementById('ipt2');
  55. 　　        ipt1.onclick=function (){
  56. 　　            if(!a)
  57. 　　            {return;}
  58. 　　        t =setInterval(move,16);
  59. 　　            a=false;
  60. 　　        }
  61. 　　        ipt2.onclick=function (){ clearInterval(t);a=true;}
  62. 　　    </script>
  63. 　　</body>
  64. 　　</html>
  65. 　　
代码文件： 圆周运动.rar  


阅读(378) | 评论(0) | 转发(0) |
0

上一篇：Javascript 拖拽 放大镜

下一篇：innerHTML用法

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6