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>
<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画了一个椭圆的更多相关文章
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- jquery.wordexport.js打印echarts.js画出的柱状图
jquery.wordexport.js打印echarts.js画出的柱状图. echarts画出的图是不能直接打印出来的(echarts的柱状图是用canvas画出来的),而jquery.worde ...
- SVG.JS 画弧线
需求描述: 使用svg.js,绘制一个弧线.下图绿色弧线. 准备工作: 1.了解SVG Path中的A指令 详细文档,请戳这里 给定x半径.y半径后,经过指定的两点,可以有2个椭圆,因此两点间有2条弧 ...
- js获取上一个月、下一个月格式为yyyy-mm-dd的日期
/** * 获取上一个月 * * @date 格式为yyyy-mm-dd的日期,如:2014-01-25 */ function getPreMonth(date) { var arr = date. ...
- JS实现的一个验证码，可以在前端验证后在提交action
js实现的一个验证码功能,可以在前端判断验证码输入是否正确 输入的邮箱格式是否正确 验证成功后才提交action到后台 <!DOCTYPE html PUBLIC "-//W3C//D ...
- js如何获取一个月的天数 data javascript
js如何获取一个月的天数 function days(year,month){ var dayCount; now = new Date(year,month, 0); dayCount = now. ...
- 用JS画斐波那契螺旋线（黄金螺旋线）
偶然看到斐波那契螺旋线(黄金螺旋线)的定义及画图方法,试着用JS画了一下,很漂亮,很好玩 具体定义及画法大家查一下就有了,很简单. 以下是代码: <!DOCTYPE html> <h ...
- php中向前台js中传送一个二维数组
在php中向前台js中传送一个二维数组,并在前台js接收获取其中值的全过程方法: (1),方法说明:现在后台将数组发送到前台 echo json_encode($result); 然后再在js页面中的 ...
- Node.js 撸第一个Web应用
使用Node.js 创建Web 应用与使用PHP/Java 语言创建Web应用略有不同. 使用PHP/Java 来编写后台代码时,需要Apache 或者 Nginx 的HTTP 服务器,而接受请求和提 ...
随机推荐
- GB2312 Unicode转换表实现跨平台utf8转码unicode
在GSM模块中,为发送中文短信,采用pdu发送,需要unicode编码.源程序编辑软件将中文转化为GB2312编码,再下列的GB2312 Unicode转换表转为unicode. 实现2维数值,GB2 ...
- C++ CheckBox_Porerty
主题 1. s Caption属性 CheckBox CheckDlgButton BOOL CheckDlgButton( HWND hDlg, // handl ...
- IOS 常用第三方库
名称 特性 效果图 FXBlurView 实时背景模糊效果 FDFullscreenPopGesture 让UINavigationController在屏幕任何位置均可滑动返回 NJKWebVi ...
- IOS 小技巧积累
转自:http://blog.csdn.net/mars2639/article/details/7352012 1. 使用@property和@synthesize声明一个成员变量,给其赋值是时要在 ...
- NonEmpty和Non Empty的区别[转]
One of my favourite questions in MDX is the difference between Non Empty and NonEmpty because even t ...
- 申请TexturePacker 或 PhysicsEditor free licenses
有一个跟开发有关的blog,就可以去 http://www.codeandweb.com/request-free-license 申请一个free licenses. 可以申请TexturePack ...
- QT断点续传
//功能: 根据一个URL地址将数据保存到指定路径下,支持断点续传//参数: url --需要访问的URL地址// SavePath -- ...
- Ng-include 例子
<body> <div ng-app="myApp"> <div ng-controller="firstController"& ...
- ajax生成html双引号问题
//动态创建列表 function createLists(result){ var len=result.length,i; for(i=0;i<len;i++){ $myLi = $(&qu ...
- Implementing the skip list data structure in java --reference
reference:http://www.mathcs.emory.edu/~cheung/Courses/323/Syllabus/Map/skip-list-impl.html The link ...