Phiên bản đầy đủ: jsB@nk » Đồ họa » Vẽ đường thẳng và đường tròn
URL: https://www.javascriptbank.com/lines-and-circles.html
Hiệu ứng dùng hàng trăm layer chứa các dấu chấm nhỏ để vẽ nên các đường thẳng và đường tròn trên trang web. Hiệu ứng JavaScript này tốn khá nhiều bộ nhớ để xử lí.
Phiên bản đầy đủ: jsB@nk » Đồ họa » Vẽ đường thẳng và đường tròn
URL: https://www.javascriptbank.com/lines-and-circles.html
<SCRIPT name=laydiv.js>//detecting browser to dynamically write appropriate DIVs/LAYERsN=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)M=(navigator.appName.indexOf('Microsoft')!=-1)Vis=new Array()Vis[0]=(M||S) ? "hidden" : "hide"Vis[1]=(M||S) ? "visible" : "show"function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""Styl = (M||S) ? "<DIV" : "<LAYER"if(M||S){Styl+=" ID="+divIdStyl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkColStyl+=";visibility:"+Vis[visb]+";z-index:"+zIndStyl+="'>"}if(N){Styl+=" ID="+divIdStyl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkColStyl+=" visibility="+Vis[visb]+" z-index="+zIndStyl+=">"}document.writeln(Styl)}function EndDiv(){(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")}function PutIt(ID,dX,dY){if(N){document.layers[ID].left=dXdocument.layers[ID].top=dY}if(M){document.all[ID].style.left=dXdocument.all[ID].style.top=dY}if(S){document.getElementById(ID).style.left=dXdocument.getElementById(ID).style.top=dY}}function ShowHide(ID,vs){if(N){document.layers[ID].visibility=Vis[vs]}if(M){document.all[ID].style.visibility=Vis[vs]}if(S){document.getElementById(ID).style.visibility=Vis[vs]}}function Xof(ID){if(N){return document.layers[ID].left}if(M){return document.all[ID].style.left}if(S){return document.getElementById(ID).style.left}}function Yof(ID){if(N){return document.layers[ID].top}if(M){return document.all[ID].style.top}if(S){return document.getElementById(ID).style.top}}function Zind(ID,zz){if(N){document.layers[ID].zIndex=zz}if(M){document.all[ID].style.zIndex=zz}if(S){document.getElementById(ID).style.zIndex=zz}}function ChangeCol(ID,colrx){if(M)document.all[ID].style.background=colrxif(N)document.layers[ID].bgColor=colrxif(S)document.getElementById(ID).style.background=colrx}function DivWrite(IdName,Str) {if (N){document.layers[IdName].document.write(Str)document.layers[IdName].document.close()}if(M) document.all[IdName].innerHTML=Strif(S) document.getElementById(IdName).innerHTML=Str}</SCRIPT><SCRIPT name=shapes.js>function DrawCircle(cX,cY,radius,numP,clor,pnt){//cX,cY=center coords//radius=radius//numP=number of dots required//clor=color of dot//pnt=size of dots (max 6)for(ang=0;ang<numP;ang++){pX=cX-parseInt(radius*Math.cos(2*ang*Math.PI/numP))pY=cY-parseInt(radius*Math.sin(2*ang*Math.PI/numP))GetDiv('o'+ang,pY,pX,10,10,'',1,1)document.write("<font color=",clor," size=",pnt,">.</font>")EndDiv()}}function DrawLine(x1,y1,x2,y2,clor,pnt){//from point (x1,y1) to (point(x2,y2)//clor=color of dot//pnt=size of dots (max 6)DY=y2-y1DX=x2-x1AX=Math.abs(DX)AY=Math.abs(DY)if(AX>=AY){X1=(x1<x2)?x1:x2X2=(x1<x2)?x2:x1Y1=(x1<x2)?y1:y2Y2=(x1<x2)?y2:y1Slope=(Y2-Y1)/(X2-X1)for(px=X1;px<X2;px++){GetDiv('l'+px,Math.round(Y1+Slope*px),px,10,10,'',1,1)document.write("<font color=",clor," size=",pnt,">.</font>")EndDiv()}}else{Y1=(y1<y2)?y1:y2Y2=(y1>y2)?y1:y2X1=(y1<y2)?x1:x2X2=(y1<y2)?x2:x1Slope=(X2-X1)/(Y2-Y1)for(px=Y1;px<Y2;px++){GetDiv('l'+px,px,Math.round(X1+Slope*px),10,10,'',1,1)document.write("<font color=",clor," size=",pnt,">.</font>")EndDiv()}}window.status=DX+":"+AX+" - "+DY+":"+AY}</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com--><SCRIPT>DrawCircle(300,300,100,500,"blue",5)DrawCircle(150,150,200,500,"red",5)DrawLine(200,250,200,500,"lime",5)DrawLine(200,500,400,400,"black",5)DrawLine(400,400,500,200,"cyan",5)DrawLine(50,60,100,20,"black",5)DrawLine(600,500,50,500,"green",5)</SCRIPT><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->