<!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. LFI漏洞利用总结(转载)

    主要涉及到的函数include(),require().include_once(),require_once()magic_quotes_gpc().allow_url_fopen().allow_ ...

  2. php7.0 redis扩展下载地址

    http://windows.php.net/downloads/pecl/snaps/redis/20160319/

  3. ABAP OO的八大理由

    原贴地址:http://scnblogs.techweb.com.cn/abaplv/archives/127.html 几年前SAP BASIS 4.6为ABAP扩展了OO功能,这是很多传统的ABA ...

  4. SSAS 实例重命名

            在某些时候我们可能想对现有的SSAS实例进行重命名之类的,比如:我以前有两个SSAS,一个2005,一个2008R2,其中我们2005是一开始安装的,并且是默认实例,2008R2是命名 ...

  5. AngularJS - Apply方法监听model变化

    <body> <div ng-app="myApp"> <div ng-controller="firstController" ...

  6. NODE编程（二）--异步编程技术

    在Node世界里流行两种响应逻辑管理方式,回调和事件监听. 回调通常用来定义一次性响应的逻辑.比如对于数据的查询,可以指定一个回调函数来确定如何处理查询结果. 事件监听器,本质上也是一个回调,不同的是 ...

  7. PHP读书笔记（7）- 函数

    自定义函数 PHP内置了超过1000个函数,因此函数使得PHP成为一门非常强大的语言.大多数时候我们使用系统的内置函数就可以满足需求,但是自定义函数通过将一组代码封装起来,使代码进行复用,程序结构与逻 ...

  8. Java中String类的format方法使用总结

    可参考: http://www.cnblogs.com/fsjohnhuang/p/4094777.html http://kgd1120.iteye.com/blog/1293633 String类 ...

  9. SVN更改用户名和密码

    关于SVN更换用户名和密码的问题,SVN是一个脚本的扩展软件,但是通过客户端更改用户名和密码的时候比较弱智,必须要经过一些操作之后才能出现更改用户名和密码的对话框. 主要的步骤就是“点击鼠标右键选择T ...

  10. Angular 2.0 从0到1 （七）

    第一节:Angular 2.0 从0到1 (一)第二节:Angular 2.0 从0到1 (二)第三节:Angular 2.0 从0到1 (三)第四节:Angular 2.0 从0到1 (四)第五节: ...