<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

          /*

     * Draw a Oval

     * The following is the formula of Oval.

     * All dots is drawn by it.

     * x = r*a*cosθ　(0 <= θ <= 2π)

     * y = r*b*sinθ　(0 <= θ <= 2π)

     * b*b + r*r = a*a //Pythagoras Theorem

     */

    var Circle = {

        centre_of_circle : {x:,y:},

        radius : ,

        dot : function(x,y,w){

            return "<div id='dot_"+x+y+"' style='display:none;font-size:0;width:"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px'></div>";

        },

        draw : function(){

            var s = "",

                dots = ,

                a = ,

                b = ,

                dotsArr = [];

            for(var i = ; i < dots; i++){

                var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i**Math.PI/dots)*a;

                var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i**Math.PI/dots)*b;

                s += Circle.dot(x, y, );

                dotsArr.push({"y":y,"x":x});

            }

            document.body.innerHTML = s;

            return dotsArr;

        }

    }

    window.onload = function(){

        var dots = Circle.draw();

        var count = ;

        var t = window.setInterval(function(){

           document.getElementById("dot_"+dots[count].x+dots[count].y).style.display = "block";

           count++;

           if(count >= dots.length) window.clearInterval(t);

        },);

    }

</script>

</head>

<body>

</body>

</html>
<!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>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>test</title>

<script type="text/javascript">

    /*

     * Draw a Oval

     * The following is the formula of Oval.

     * All dots is drawn by it.

     * x = r*a*cosθ　(0 <= θ <= 2π)

     * y = r*b*sinθ　(0 <= θ <= 2π)

     * b*b + r*r = a*a //Pythagoras Theorem

     */

    var Circle = {

        centre_of_circle : {x:,y:},

        radius : ,

        dot : function(x,y,w){

            return "<div id='dot_"+x+y+"' style='display:none;font-size:0;width:"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px'></div>";

        },

        draw : function(){

            var dots = ,

                a = ,

                b = ,

                dotsArr = [];

            for(var i = ; i < dots; i++){

                var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i**Math.PI/dots)*a;

                var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i**Math.PI/dots)*b;

                dotsArr.push({"y":y,"x":x});

            }

            return dotsArr;

        },

        words : function(aObjArr){

            var s = "";

            s += "<a href='"+aObjArr.href+"' target='_blank' style='position:absolute;' id='a_"+aObjArr.id+"'>"+aObjArr.str+"</a>";

            return s;

        }

    }

    window.onload = function(){

        var dots = Circle.draw();

        var count = ;

        document.body.innerHTML = Circle.words({href:"http://www.baidu.com",id:dots[count].x+""+dots[count].y,str:"baidu"});

        var style = document.getElementById("a_"+dots[count].x+""+dots[count].y).style;

        var t = window.setInterval(function(){

           with(style){

               top = dots[count].y+"px";

               left = dots[count].x+"px";

               fontSize = (dots[count].y/)+"px"

           }

           count++;

           if(count >= dots.length){

               count = ;

           }

        },);

    }

</script>

</head>  

<body>

</body>

</html>

js画了一个椭圆的更多相关文章

  1. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  2. jquery.wordexport.js打印echarts.js画出的柱状图

    jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...

  3. SVG.JS 画弧线

    需求描述: 使用svg.js,绘制一个弧线.下图绿色弧线. 准备工作: 1.了解SVG Path中的A指令 详细文档,请戳这里 给定x半径.y半径后,经过指定的两点,可以有2个椭圆,因此两点间有2条弧 ...

  4. js获取上一个月、下一个月格式为yyyy-mm-dd的日期

    /** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...

  5. JS实现的一个验证码，可以在前端验证后在提交action

    js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 <!DOCTYPE html PUBLIC "-//W3C//D ...

  6. js如何获取一个月的天数 data javascript

    js如何获取一个月的天数 function days(year,month){ var dayCount; now = new Date(year,month, 0); dayCount = now. ...

  7. 用JS画斐波那契螺旋线（黄金螺旋线）

    偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...

  8. php中向前台js中传送一个二维数组

    在php中向前台js中传送一个二维数组,并在前台js接收获取其中值的全过程方法: (1),方法说明:现在后台将数组发送到前台 echo json_encode($result); 然后再在js页面中的 ...

  9. Node.js 撸第一个Web应用

    使用Node.js 创建Web 应用与使用PHP/Java 语言创建Web应用略有不同. 使用PHP/Java 来编写后台代码时,需要Apache 或者 Nginx 的HTTP 服务器,而接受请求和提 ...

随机推荐

  1. 启用MySQL查询缓存

    启用MySQL查询缓存能够极大地减低数据库server的CPU使用率,实际使用情况是:开启前CPU使用率120%左右,开启后降到了10%. 查看查询缓存情况: mysql> show varia ...

  2. java中的正则操作总结

    http://www.cnblogs.com/nerxious/archive/2013/01/03/2842910.html 正则表达式在处理字符串的效率上是相当高的 关于正则表达式的使用,更多的是 ...

  3. sql优化-隐形转换危害

    level  整形字段 a:select * form t_user where level =2; b:select * form t_user where level ='2'; b里面的隐形字段 ...

  4. 打开Excel时提示"您尝试打开的文件**.xls的格式与文件扩展名指定的格式不一致"

    问题描述:     系统安装了WPS时,Analyzer导出excel时候,会提示"您尝试打开的文件**.xls的格式与文件扩展名指定的格式不一致",这是Excel的安全问题,   ...

  5. Jordan Lecture Note-9: Principal Components Analysis (PCA).

    Principal Components Analysis (一)引入PCA    当我们对某个系统或指标进行研究时往往会发现,影响这些系统和指标的因素或变量的数量非常的多.多变量无疑会为科学研究带来 ...

  6. Java_eclipse软件与git配合使用创建git仓库

    一.在eclipse上安装git,和安装其他插件一样 help->Install new software->add... 在弹出框中输入name,location;点击-->ok ...

  7. Python_爬虫1

    Urllib库的基本使用 那么接下来,小伙伴们就一起和我真正迈向我们的爬虫之路吧. 1.分分钟扒一个网页下来 怎样扒网页呢?其实就是根据URL来获取它的网页信息,虽然我们在浏览器中看到的是一幅幅优美的 ...

  8. Mac OS恢复出厂系统方法

    1.重新启动时按住“Command()”和"R"键盘 2.选择磁盘工具

  9. Jsonp post 跨域方案

    近期在项目中遇到这样一问题,关于jsonp跨域问题,get传值是可以的,但post传值死活不行啊,于是网上看了一大堆关于这方面的资料,最终问题得以解决,今天抽空与大家分享下. 说明:http://ww ...

  10. Mac Yosemite OS10.10 Apache 虚拟主机设置

    昨天睡觉前开始挂机下载OS10.10 Yosemite,早上6点半就很兴奋地起来安装新系统了.安装完成后打开界面,感觉真的大不一样了,很优很美,很喜欢. 在下载各种更新,体验各种新功能的同时,我也不忘 ...