<!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. 简单的玩玩etimer <contiki学习笔记之九 补充>

    这幅图片是对前面  <<contiki学习笔记之九>>  的一个补充说明. 简单的玩玩etimer <contiki学习笔记之九> 或许,自己正在掀开contiki ...

  2. jsp页面用el表达式获取枚举的code

    jsp页面用el表达式获取枚举的code <c:set var="D_BUSINESS" value="<%=DeptEnum.D_BUSINESS%> ...

  3. [IOS]自定义长触屏事件

    写一个Demo来自定义一个长触屏事件,自定义长按手势. 实现步骤: 1.创建一个自定义手势类,命名为LongPressGestureRecognizer,在创建的时候继承UIGestureRecogn ...

  4. Android 事件监听处理

    事件监听的处理模型包括三个成员:事件源.事件以及事件监听器. 基于监听的事件处理模型一般包括几个步骤: 1.获取普通界面组件: 2.实现事件监听器类 3.将监听器对象注冊给普通组件 当事件源上发生指定 ...

  5. Python dictionary implementation

    Python dictionary implementation http://www.laurentluce.com/posts/python-dictionary-implementation/ ...

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

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

  7. 探索 Linux 内存模型--转

    引用:http://www.ibm.com/developerworks/cn/linux/l-memmod/index.html 理解 Linux 使用的内存模型是从更大程度上掌握 Linux 设计 ...

  8. iOS10全新推送功能的实现

    从iOS8.0开始推送功能的实现在不断改变,功能也在不断增加,iOS10又出来了一个推送插件的开发(见最后图),废话不多说直接上代码: 在开始之前需要打开一个推送开关,不然无法获取deviceToke ...

  9. 5个可以帮你优化App的优秀网站

    也许现在有一款App可以提供所有你需要的,你不需要的,或者你可以想象到的内容.但是,有多少App真的可以不仅满足需求而且还能提供很好的用户体验呢? 相信很多APP并没有这样的能力.有一些APP的设计特 ...

  10. ASP.NET MVC and jqGrid 学习笔记 3-如何从数据库获得数据

    实际应用中,大部分都是从数据库里获得数据,所以先建立一个数据库,Database first 或者Code first都可以,这里用Code first. 一.Model public class M ...