当前位置：首页 → 问答吧 → [原创]一个利用VML和JS画的一个色彩板

[原创]一个利用VML和JS画的一个色彩板

时间：2005-09-09

来源：互联网

<html xmlns:v="urn:schemas-microsoft-com:vml"> <STYLE> v\:* { Behavior: url(#default#VML) } </STYLE> <body> <div id=div1 style="background-color:black;overflow:hidden;width:0;height:3;position:absolute"> </div> <script> var ClipSize=10; //六角形的大小 var Space=3; //当一定数量的时候会有点点误差 var ClipsLeft=30; //整个图的左边位置 var ClipsTop=30; //整个图的右边位置 //var ClipBorderColor="White" var sColor = new String; sColor = "#003366,#336699,#3366cc,#003399,#000099,#0000cc,#000066|" +"#006666,#006699,#0099cc,#0066cc,#0033cc,#0000ff,#3333ff,#333399|" +"#009999,#009999,#33cccc,#00ccff,#0099ff,#0066ff,#3366ff,#3333cc,#666699|" +"#339966,#00cc99,#00ffcc,#00ffff,#33ccff,#3399ff,#6699ff,#6666ff,#6600ff,#6600cc|" +"#339933,#00cc66,#00ff99,#66ffcc,#66ffff,#66ccff,#99ccff,#9999ff,#9966ff,#9933ff,#9900ff|" +"#006600,#00cc00,#00ff00,#66ff99,#99ffcc,#ccffff,#ccffff,#ccccff,#cc99ff,#cc66ff,#cc00ff,#9900cc|" +"#003300,#009900,#33cc33,#66ff66,#99ff99,#ccffcc,#ffffff,#ffccff,#ff99ff,#ff66ff,#ff00ff,#cc00cc,#660066|" +"#336600,#009900,#66ff33,#99ff66,#ccff99,#ffffcc,#ffcccc,#ff99cc,#ff66cc,#ff33cc,#cc0099,#990099|" +"#003300,#669900,#99ff33,#ccff66,#ffff99,#ffcc99,#ff9999,#ff6699,#ff3399,#cc3399,#990099|" +"#666633,#99cc00,#ccff33,#ffff66,#ffcc66,#ff9966,#ff6699,#ff0066,#cc0099,#993366|" +"#999900,#cccc00,#ffff00,#ffcc00,#ff9933,#ff6600,#ff6666,#cc0066,#660033|" +"#996633,#cc9900,#ff9900,#cc6600,#ff3300,#ff0000,#cc0000,#990033|" +"#663300,#996600,#cc3300,#993300,#990000,#840000,#990033" function DrawClip(r,left,top,color) { var a,b,c a=r b=GetBottom(r) c=GetHeight(r) var s="<v:PolyLine StrokeColor=\""+color+"\" filled=\"true\" Points=\"-"+c+",-" +b+" 0,-"+a+" "+c+",-" +b+" "+c+","+b+" 0," +a+" -"+c+","+b+" -" +c+",-"+b+"\" " +" fillcolor=\""+color+"\" style=\"position:absolute;left:"+left+";top:"+top+";\"\/>" document.write(s) } function GetBottom(r){ return r/2;} function GetHeight(r) { var r2=GetBottom(r)*GetBottom(r) return Math.round(Math.sqrt(r*r-r2)) } var arrColor=sColor.split("|") var left=7; var add=1; for(i=0;i<arrColor.length;i++) { left-=add; cor=arrColor[i].split(",") for(j=0;j<cor.length;j++) { if(left==0){add=-1} var width=GetHeight(ClipSize)*2 if(i%2==0) { DrawClip(ClipSize,(j*width+width)+(width*left/2)+ClipsLeft,i*(width-Space)+ClipsTop,cor[j]) } else { DrawClip(ClipSize,(j*width+width/2)+(width*left/2)+width/2+ClipsLeft,i*(width-Space)+ClipsTop,cor[j]) } } } </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: zmb 发布时间: 2005-09-09

真是猛呀。
我越来越发现我不适合搞这行了。
要是想找个工资高点的，那你得html,css,js, xml,vml, 还有一大堆后台的php/asp/jsp等，甚至还要会些美工，等你学好还不知得几年，几年后这些玩意还有没有用。
更气人的是，搞这行工资一降再降，在内地好多地方一个月才1000元左右，还不如路边卖苹果的。

作者: 比尔熊发布时间: 2005-09-09

因为你没有学过,或者是没有用过. 如果你学过用过,我相信你也能做的出来的!
人的一生都在学习,但是也不能缺乏娱乐.说句实在话,真正做到高层,没有几个是编程很厉害的.但是他们的管理能力是有的.

说到卖苹果,呵呵.,现在卖的好点估计比程序员工资高很多了!

作者: 果子狸发布时间: 2005-09-09

不能用嘛

作者: titil 发布时间: 2005-09-15

<html xmlns:v="urn:schemas-microsoft-com:vml"> <STYLE> v\:* { Behavior: url(#default#VML) } td,body,input{font-size:9pt} </STYLE> <body bgcolor=menu> <table cellspacing=0 STYLE="font:9pt verdana"> <tr><td>Hex值</td><td><input size=8 id=div1 style="font:8pt verdana"></td></tr> <tr><td width=40 height=30>当前:</td><td id=td1 width=60></td></tr> <tr><td width=40 height=30>已选:</td><td id=td2 width=60 bgColor="Black"></td></tr> <tr><td> </td><td align=center> <p> <table width=20 cellspacing=0 id=detailColor> </script> </table> </table> <script> var ClipSize=10; //六角形的半径 var Space=3; //当一定数量的时候会有点点误差 var ClipsLeft=130; //整个图的左边位置 var ClipsTop=10; //整个图的高 var NowColor="#000000"; //当前选中的颜色 //var ClipBorderColor="White" var sColor = new Array; sColor[0]=new Array("#003366","#336699","#3366cc","#003399","#000099","#0000cc","#000066") sColor[1]=new Array("#006666","#006699","#0099cc","#0066cc","#0033cc","#0000ff","#3333ff","#333399") sColor[2]=new Array("#009999","#009999","#33cccc","#00ccff","#0099ff","#0066ff","#3366ff","#3333cc","#6666cc") sColor[3]=new Array("#339966","#00cc99","#00ffcc","#00ffff","#33ccff","#3399ff","#6699ff","#6666ff","#6600ff","#6600cc") sColor[4]=new Array("#339933","#00cc66","#00ff99","#66ffcc","#66ffff","#66ccff","#99ccff","#9999ff","#9966ff","#9933ff","#9900ff") sColor[5]=new Array("#006600","#00cc00","#00ff00","#66ff99","#99ffcc","#ccffff","#ccffff","#ccccff","#cc99ff","#cc66ff","#cc00ff","#9900cc") sColor[6]=new Array("#003300","#009900","#33cc33","#66ff66","#99ff99","#ccffcc","#ffffff","#ffccff","#ff99ff","#ff66ff","#ff00ff","#cc00cc","#660066") sColor[7]=new Array("#336600","#009900","#66ff33","#99ff66","#ccff99","#ffffcc","#ffcccc","#ff99cc","#ff66cc","#ff33cc","#cc0099","#990099") sColor[8]=new Array("#003300","#669900","#99ff33","#ccff66","#ffff99","#ffcc99","#ff9999","#ff6699","#ff3399","#cc3399","#990099") sColor[9]=new Array("#666633","#99cc00","#ccff33","#ffff66","#ffcc66","#ff9966","#ff6699","#ff0066","#cc0099","#993366") sColor[10]=new Array("#999900","#cccc00","#ffff00","#ffcc00","#ff9933","#ff6600","#ff6666","#cc0066","#660033") sColor[11]=new Array("#996633","#cc9900","#ff9900","#cc6600","#ff3300","#ff0000","#cc0000","#990033") sColor[12]=new Array("#663300","#996600","#cc3300","#993300","#990000","#840000","#990033") var BnW=new Array() BnW[0]=new Array("#ffffff","#cccccc","#c9c9c9","#999999","#666666","#333333","#030303","#000000") BnW[1]=new Array("#eaeaea","#c0c0c0","#969696","#777777","#4d4d4d","#292929","#111111") function DrawClip(r,left,top,color,borderColor,id,fill) { var a,b,c a=r b=GetBottom(r) c=GetHeight(r) var s="<v:PolyLine id=clip"+id+" StrokeColor=\""+borderColor+"\" filled=\""+fill+"\" Points=\"-"+c+",-" +b+" 0,-"+a+" "+c+",-" +b+" "+c+","+b+" 0," +a+" -"+c+","+b+" -" +c+",-"+b+"\" " +" fillcolor=\""+color+"\" onmouseover=MouseOver(\""+color+"\")" +" onclick=SetSelectedColor('"+color+"',this) " +"style=\"position:absolute;left:"+left+";top:"+top+";\"\/>" return s; } function GetBottom(r){ return r/2;} function GetHeight(r) { var r2=GetBottom(r)*GetBottom(r) return Math.round(Math.sqrt(r*r-r2)) } function main(){ //主程序 var oldSize=ClipSize; DrawAllClips(sColor,7,1) //画彩色 ClipsTop = ClipsTop + ClipSize * 2 * 13 - ClipSize / 2 * 13 + ClipSize ClipsLeft = ClipsLeft + GetHeight(ClipSize) * 2 * 2 - GetHeight(ClipSize) / 2 * 2 + ClipSize/2 DrawAllClips(BnW,1,-1) //画黑白 ClipSize = ClipSize*2-ClipSize/3 document.write(DrawClip(ClipSize,ClipsLeft,ClipsTop+ClipSize/2,"#FFFFFF","#FFFFFF",4,true)) var ClipsLeft2 = ClipsLeft + GetHeight(oldSize) * (BnW[0].length+3) * 2 document.write(DrawClip(ClipSize, ClipsLeft2, ClipsTop + ClipSize/2, "#000000", "#000000", 5, true)) //画边框 document.write(DrawClip(oldSize-1,-100,-100,"","Black",1,false)) document.write(DrawClip(oldSize,-100,-100,"","white",2,false)) document.write(DrawClip(oldSize+1,-100,-100,"","Black",3,false)) document.write(DrawClip(ClipSize-2,-100,-100,"","Black",7,false)) document.write(DrawClip(ClipSize,-100,-100,"","white",8,false)) document.write(DrawClip(ClipSize+1,-100,-100,"","Black",9,false)) } function DrawAllClips(obj,left,add) // 画大量六角块 { ClipsLeft-=10; //重新调整左边位置 ClipsTop+=10; //重新调整右边位置 var width=GetHeight(ClipSize)*2 for(i=0;i<obj.length;i++) { left-=add; for(j=0;j<obj[i].length;j++) { if(left==0){add=-1} if(i%2==0) { document.write(DrawClip(ClipSize,(j*width+width)+(width*left/2)+ClipsLeft,i*(width-Space)+ClipsTop,obj[i][j],obj[i][j],0,true)) } else { document.write(DrawClip(ClipSize,(j*width+width/2)+(width*left/2)+width/2+ClipsLeft,i*(width-Space)+ClipsTop,obj[i][j],obj[i][j],0,true)) } } } } function SetSelectedColor(s_color,obj) { var oL=obj.style.left; var oT=obj.style.top; if(obj.id=="clip4"||obj.id=="clip5"){ clip7.style.left=clip8.style.left=clip9.style.left=oL; clip7.style.top=clip8.style.top=clip9.style.top=oT; clip1.style.top=clip2.style.top=clip3.style.top=-1000; }else{ clip7.style.top=clip8.style.top=clip9.style.top=-1000; clip1.style.left=clip2.style.left=clip3.style.left=oL; clip1.style.top=clip2.style.top=clip3.style.top=oT; } if(s_color!=""){NowColor=s_color} div1.value=NowColor.toUpperCase() td2.bgColor=NowColor; } function MouseOver(cor) { var tmpColor; if(cor!="") {tmpColor=cor} window.status=tmpColor; td1.bgColor=tmpColor; } main() </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: zmb 发布时间: 2005-09-19

不错，好东西，收了~~~

这类程序在我看来是很复杂的了，^^ 所以只有向作者致敬。

作者: ※潇洒※ 发布时间: 2005-09-19