<!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:200,y:200}, radius : 12, dot : function(x,y,w){ return "<div id='dot_"+x+y+"' style='display:none;font-size:0;"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px'></div>"; }, draw : function(){ var s = "", dots = 500, a = 15, b = 9, dotsArr = []; for(var i = 0; i < dots; i++){ var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i*2*Math.PI/dots)*a; var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i*2*Math.PI/dots)*b; s += Circle.dot(x, y, 2); dotsArr.push({"y":y,"x":x}); } document.body.innerHTML = s; return dotsArr; } } window.onload = function(){ var dots = Circle.draw(); var count = 0; 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); },1); } </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:200,y:200}, radius : 12, dot : function(x,y,w){ return "<div id='dot_"+x+y+"' style='display:none;font-size:0;"+w+"px;height:"+w+"px;position:absolute;background-color:#000;top:"+(y)+"px;left:"+(x)+"px'></div>"; }, draw : function(){ var dots = 300, a = 15, b = 9, dotsArr = []; for(var i = 0; i < dots; i++){ var x = Circle.centre_of_circle.x+Circle.radius*Math.cos(i*2*Math.PI/dots)*a; var y = Circle.centre_of_circle.y+Circle.radius*Math.sin(i*2*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 = 0; 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/10)+"px" } count++; if(count >= dots.length){ count = 0; } },1); } </script> </head> <body> </body> </html>