奥运五环(一个简单的的测试浏览器对javascript的解析速度)

    技术2022-05-20  30

     

    <html>

     <head>

     <title>奥运五环</title>

     </head>

     <body>

      <script>

    //x、y分别是点的横纵坐标,color是点的颜色

    function createPoint(x,y,color){

    document.write("<div style='overflow:hidden; background-color:"+color+";width:1px;line-height:1px;top:"+y+"px;left:"+x+"px;position:absolute;'> </div>");

    }

    //x、y是圆心坐标,r是圆的最大半径,w是圆边宽度(当宽度过大时,有的浏览器解析速度会超时),color是圆的颜色

    function createCircle(x,y,r,w,color){

    if(w<=0){alert("圆的宽度必须大于零!!");return;}

    if(r<=w){w=r;}

     

    for(var j=r-w;j<r+1;j++){

    for(var i=0;i<720;i++){

    var single=(i*0.5/180)*3.1415926

    var top=y+Math.floor(j*Math.cos(single));

    var left=x+Math.floor(j*Math.sin(single));

    createPoint(left,top,color);

    }

    }

    }

     

    createCircle(322,312,90,10,"#ff0000");  

    createCircle(512,312,90,10,"#00ff00");  

    createCircle(702,312,90,10,"#0000ff");  

    createCircle(417,392,90,10,"#000000");  

    createCircle(605,392,90,10,"#123456");  

    </script>

    </body>

    </html>

     


    最新回复(0)