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 服务器,而接受请求和提 ...
随机推荐
- Selenium 中使用方法小结
--> 文本框 中填写 文本信息 basePage.getTXTPortfolio().sendKeys("文本信息"); --> 点击某个 文本框/下拉列表 中的 指 ...
- PostgreSQL的 initdb 源代码分析之十八
继续分析: setup_conversion(); 展开: 其实质是: 运行命令:"/home/pgsql/project/bin/postgres" --single -F -O ...
- [C#]匿名类型的深拷贝
.net Framework 3.5 + C# 3 发布了包括LinQ等一系列功能,其中包括了匿名类型,而我们在升级到.net4后,发现原来写好的用于POCO的深拷贝方法 static object ...
- 【转】adns解析库——域名解析实例（C++、linux）
转自:http://blog.csdn.net/fty8788/article/details/7480334 adns是一个开源的dns解析库 官方文档:http://www.chiark.gree ...
- cdoj 1255 斓少摘苹果 贪心
斓少摘苹果 Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1255 Descr ...
- 从零开始学习Hadoop--第2章 第一个MapReduce程序
1.Hadoop从头说 1.1 Google是一家做搜索的公司 做搜索是技术难度很高的活.首先要存储很多的数据,要把全球的大部分网页都抓下来,可想而知存储量有多大.然后,要能快速检索网页,用户输入几个 ...
- [Javascript] Other functor
EventStream: You can use RxJS, BaconJS or any reactive programming lib you want: var id_s = map(func ...
- 小白日记27：kali渗透测试之Web渗透-Http协议基础，WEB
Http协议基础 Web技术发展[http://www.cnblogs.com/ProgrammerGE/articles/1824657.html] 静态WEB[网页] 动态WEB 属于一种应用程序 ...
- 在openshift上使用django+postgresql
openshift上用的是django 1.7,数据库选择的是postgresql 9.2 本地开发用的是sqlite3数据库,发布到openshift上后是没有数据的(本地的sqlite3数据库里的 ...
- [设计模式]<<设计模式之禅>>关于单例模式
1 我是皇帝我独苗 自从秦始皇确立了皇帝这个位置以后,同一时期基本上就只有一个人孤零零地坐在这个位置.这种情况下臣民们也好处理,大家叩拜.谈论的时候只要提及皇帝,每个人都知道指的是谁,而不用在皇帝前 ...