Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Công cụ chọn màu của Milonic
URL: https://www.javascriptbank.com/milonic-dhtml-color-picker.html
Đây là một đoạn mã JavaScript JavaScript của Milonic để tạo ra công cụ chọn màu trên trang web.
Phiên bản đầy đủ: jsB@nk » Ứng dụng » Công cụ xuất » Công cụ chọn màu của Milonic
URL: https://www.javascriptbank.com/milonic-dhtml-color-picker.html
<TABLE style="BORDER-RIGHT: #bbbbbb 1px solid; BORDER-TOP: #bbbbbb 1px solid; BORDER-LEFT: #bbbbbb 1px solid; BORDER-BOTTOM: #bbbbbb 1px solid" cellPadding=13 border=0 id="table1"> <TBODY> <TR> <TD class=menuW>Color picker is another work in progress.<BR><BR>As we improve it, we will add more details and docs here.<BR><BR><SCRIPT language=javascript>curbgcol="0000ff";curfgcol="#ffff00";if(curbgcol.substr(1,0)!="#")curbgcol="#"+curbgcolbleft=20btop=20cpheight=10cpwidth=10cpgap=1samplewidth=50;sampletext="<b>T<br>e<br>x<br>t"d=document;curcol="bg";nscurbgcol=curbgcol;nscurfgcol=curfgcolfunction rgb2hex(r,g,b){rval=dec2hex(r)+dec2hex(g)+dec2hex(b);return rval}function rgb2dec(r,g,b){rval=rgb2hex(r,g,b);rval=hex2dec(rval);return rval}function hex2dec(hd){rval=parseInt(hd,16);return rval}function dec2hex(dh){rhex=tohex(dh);return rhex}function tohex(i){a2='';ihex=hexQuot(i);idiff=eval(i+'-('+ihex+'*16)');a2=itohex(idiff)+a2;while(ihex>=16){itmp=hexQuot(ihex);idiff=eval(ihex+'-('+itmp+'*16)');a2=itohex(idiff)+a2;ihex=itmp;}a1=itohex(ihex);return a1+a2;}function hexQuot(i){return Math.floor(eval(i+'/16'))}function itohex(i){if(i==0){aa='0'}else{if(i==1){aa='1'}else{if(i==2){aa='2'}else{if(i==3){aa='3'}else{if(i==4){aa='4'}else{if(i==5){aa='5'}else{if(i==6){aa='6'}else{if(i==7){aa='7'}else{if(i==8){aa='8'}else{if(i==9){aa='9'}else{if(i==10){aa='A'}else{if(i==11){aa='B'}else{if(i==12){aa='C'}else{if(i==13){aa='D'}else{if(i==14){aa='E'}else{if(i==15){aa='F'}}}}}}}}}}}}}}}}return aa}function g_col(rgb,hex){if(rgb=="r"){thv=hex2dec(hex.substr(0,2))}if(rgb=="g"){thv=hex2dec(hex.substr(2,2))}if(rgb=="b"){thv=hex2dec(hex.substr(4,2))}return thv}function gmobj(mtxt){if(d.getElementById){m=d.getElementById(mtxt)}else if(d.all){m=d.all[mtxt]}else if(d.layers){m=d.cpicker.document.layers.eval(mtxt)}return m;}ns4=(d.layers)?true:falsens6=(navigator.userAgent.indexOf("Gecko")!=-1)?true:falsemac=(navigator.appVersion.indexOf("Mac")!=-1)?true:falseopera=(navigator.userAgent.indexOf("Opera")!=-1)?true:falsens693=(parseInt(navigator.productSub)>=20010726)?true:falsemp=(ns6)?"pointer":"hand"if(ns4){d.write("<layer id=cpicker>")}else{d.write("<div id=cpicker style='position:absolute;'>")}swatch=["330000","333300","336600","339900","33CC00","33FF00","66FF00","66CC00","669900","666600","663300","660000","FF0000","FF3300","FF6600","FF9900","FFCC00","FFFF00","330033","333333","336633","339933","33CC33","33FF33","66FF33","66CC33","669933","666633","663333","660033","FF0033","FF3333","FF6633","FF9933","FFCC33","FFFF33","330066","333366","336666","339966","33CC66","33FF66","66FF66","66CC66","669966","666666","663366","660066","FF0066","FF3366","FF6666","FF9966","FFCC66","FFFF66","330099","333399","336699","339999","33CC99","33FF99","66FF99","66CC99","669999","666699","663399","660099","FF0099","FF3399","FF6699","FF9999","FFCC99","FFFF99","3300CC","3333CC","3366CC","3399CC","33CCCC","33FFCC","66FFCC","66CCCC","6699CC","6666CC","6633CC","6600CC","FF00CC","FF33CC","FF66CC","FF99CC","FFCCCC","FFFFCC","3300FF","3333FF","3366FF","3399FF","33CCFF","33FFFF","66FFFF","66CCFF","6699FF","6666FF","6633FF","6600FF","FF00FF","FF33FF","FF66FF","FF99FF","FFCCFF","FFFFFF","0000FF","0033FF","0066FF","0099FF","00CCFF","00FFFF","99FFFF","99CCFF","9999FF","9966FF","9933FF","9900FF","CC00FF","CC33FF","CC66FF","CC99FF","CCCCFF","CCFFFF","0000CC","0033CC","0066CC","0099CC","00CCCC","00FFCC","99FFCC","99CCCC","9999CC","9966CC","9933CC","9900CC","CC00CC","CC33CC","CC66CC","CC99CC","CCCCCC","CCFFCC","000099","003399","006699","009999","00CC99","00FF99","99FF99","99CC99","999999","996699","993399","990099","CC0099","CC3399","CC6699","CC9999","CCCC99","CCFF99","000066","003366","006666","009966","00CC66","00FF66","99FF66","99CC66","999966","996666","993366","990066","CC0066","CC3366","CC6666","CC9966","CCCC66","CCFF66","000033","003333","006633","009933","00CC33","00FF33","99FF33","99CC33","999933","996633","993333","990033","CC0033","CC3333","CC6633","CC9933","CCCC33","CCFF33","000000","003300","006600","009900","00CC00","00FF00","99FF00","99CC00","999900","996600","993300","990000","CC0000","CC3300","CC6600","CC9900","CCCC00","CCFF00"]function fixhexcolor(col){col=col+"000000";col=col.substr(0,6);col=col.toUpperCase();ncol="";for(a=0;a<col.length;a++){ts=col.substr(a,1);if(isNaN(ts)){if(ts=="A"||ts=="B"||ts=="C"||ts=="D"||ts=="E"||ts=="F"){ncol+=ts}else{ncol+="0"}}else{ncol+=ts}}return ncol}function getnstext(){return "<html><head></head><body bgcolor="+nscurbgcol+" text="+nscurfgcol+"><layer width="+samplewidth+"><table width=100%><tr><td class=form1 align=center>"+sampletext+"</td></tr></table></layer></body></html>"}function redrawnslayer(ac){ac.document.open();nstext=getnstext();ac.document.writeln(nstext);ac.document.close();}function showcolor(adiv){if (ns4){ac = gmobj("acol");ad = gmobj("container");hex = dec2hex(adiv.bgColor)if(hex.length==2)hex="0000"+hexif(hex.length==4)hex="00"+hexif(ad.document.forms.cp.R1[0].checked){curcol="txt"nscurfgcol=hex}else{curcol="bg"nscurbgcol=hex}redrawnslayer(ac)}else{if(d.forms.cp.R1[0].checked){curcol="txt"}else{curcol="bg"}ac = gmobj("acol");if (opera){scol = adiv.style.backgroundif(curcol=="txt"){ac.style.color = adiv.style.background}else{ac.style.background = adiv.style.background}}else{scol = adiv.style.backgroundColorif(curcol=="txt"){ac.style.color = adiv.style.backgroundColor}else{ac.style.backgroundColor = adiv.style.backgroundColor}}}}function changetype(what){if(curcol=="bg")curcol="fg"; else curcol="bg"if (ns4){nscurbgcol = curbgcolnscurfgcol = curfgcolac=gmobj(what)redrawnslayer(ac)set_texts(hex)}else{ac = gmobj(what);if (opera){ac.style.background = curbgcolac.style.color =curfgcol}else{ac.style.backgroundColor = curbgcolac.style.color = curfgcol}}}function nssetcolor(e){setcolor(nsobj)}function changehexcolor(hexcolor){if(curcol=="bg"){curbgcol=fixhexcolor(hexcolor.value)nscurbgcol=curbgcolset_texts(curbgcol)}else{curfgcol=fixhexcolor(hexcolor.value)nscurfgcol=curfgcolset_texts(curfgcol)}changetype('acol');changetype('selcol');}function set_texts(hex){if (ns4){ad = gmobj("container");ad.document.forms.cp.cpcolor.value=hex.toUpperCase()ad.document.forms.cp.vred.value = g_col("r",hex)ad.document.forms.cp.vgreen.value = g_col("g",hex)ad.document.forms.cp.vblue.value = g_col("b",hex)}else{d.forms.cp.cpcolor.value = hex.toUpperCase()d.forms.cp.vred.value = g_col("r",hex)d.forms.cp.vgreen.value = g_col("g",hex)d.forms.cp.vblue.value = g_col("b",hex)}}function changergb(colr,type){if (ns4){}else{r=parseInt(d.forms.cp.vred.value)g=parseInt(d.forms.cp.vgreen.value)b=parseInt(d.forms.cp.vblue.value)rh=dec2hex(r)//alert(rh)//rint=(r+1)*(g+1)*(b+1)//hex = dec2hex(rint)//if(hex.length==2)hex="0000"+hex//if(hex.length==4)hex="00"+hex//set_texts(dec2hex(rint))//alert(hex)//alert(rint);}}function setcolor(adiv){if (ns4){hex=dec2hex(adiv.bgColor)if(hex.length==2)hex="0000"+hexif(hex.length==4)hex="00"+hexset_texts(hex)sc = gmobj("selcol");if(curcol=="bg"){curbgcol=hex}else{curfgcol=hex}redrawnslayer(sc)}else{if(ns6){scol=scol.substr(4,20)scol=scol.substr(0,scol.length-1)scol=scol.split("\,")hex=dec2hex(scol[0])+dec2hex(scol[1])+dec2hex(scol[2])}else{hex=scol.substr(1,scol.length)}if(curcol=="bg"){curbgcol=hex}else{curfgcol=hex}set_texts(hex)sc = gmobj("selcol");if (opera){if(curcol=="bg"){sc.style.background = adiv.style.background}else{sc.style.color = adiv.style.background}}else{if(curcol=="bg"){sc.style.backgroundColor = adiv.style.backgroundColor}else{sc.style.color = adiv.style.backgroundColor}}}}cnt=0;itop = btop;for (sn=0;sn<11;sn++){ileft=bleftfor (a=0;a<18;a++){if(ns4){ndiv = "<layer onmouseover=\"this.captureEvents(Event.CLICK);nsobj=this;this.onClick=nssetcolor;showcolor(this);\" bgcolor=#" + swatch[cnt] + " left=" + ileft + " top="+itop+" width="+cpwidth+" height="+cpheight+"></layer>"}else{ndiv = "<div onmouseover=\"this.style.cursor='"+mp+"';showcolor(this);\" onmouseup=\"setcolor(this);\" style=\"font-size:6px;width:"+cpwidth+"px;height:"+cpheight+"px;position:absolute;background-color:#" + swatch[cnt] + ";left:" + ileft + "px; top:"+itop+"px; \"></div>"}d.write(ndiv);cnt++ileft=ileft+cpwidth+cpgap;}itop=itop+cpheight+cpgap}ileft=ileft+cpwidth+cpgap;tbl="<form name=cp><table width="+(ileft+samplewidth)+" border=0 cellspacing=0><tr><td class=form1 valign=bottom>Red</td><td class=form1 valign=bottom><input name=vred onblur=changergb() size=3></td><td class=form1 nowrap><input onclick=changetype('acol') type=radio value=sfgc name=R1>Text<br><input onclick=changetype('acol') type=radio value=sbgc name=R1 checked>Background</td><td class=form1 width=101 rowspan=4> </td></tr><tr><td class=form1 rowspan=2>Green</td><td class=form1 rowspan=2><input name=vgreen onblur=changergb() size=3></td><td class=form1 nowrap>Hex #<input type=text name=cpcolor size=7 onblur=changehexcolor(this)></td></tr><tr><td class=form1 rowspan=2 align=center><input type=button value=OK name=btnok> <input type=button value=Cancel name=btncancel></td></tr><tr><td class=form1 valign=top>Blue</td><td class=form1 valign=top><input name=vblue onblur=changergb() size=3></td></tr></table></form>"if (ns4){}else{sampletext = "<div valign=middle align=center>"+sampletext+"</div>"}if (ns4){ndiv = "<layer id=acol left="+ ileft + " top="+(btop+5)+" width="+samplewidth+" height="+(itop-cpgap-btop-10)+"><table width=100%><tr><td class=form1 align=center>"+sampletext+"</td></tr></table></layer>"d.write(ndiv);ndiv = "<layer id=container left="+bleft+" top="+itop+">"+tbl+"</layer>"d.write(ndiv);nstext = getnstext();ndiv = "<layer id=selcol bgcolor="+curbgcol+" left="+ ileft + " top="+(itop+5)+" width="+samplewidth+" height=100>"+nstext+"</layer>"d.write(ndiv);}else{brdr = "border:solid 2px; border-left-color:#cccccc;border-top-color:#cccccc;border-bottom-color:#000000;border-right-color:#000000;"ndiv = "<div id=acol style=\"background-color:white;position:absolute;left:" + ileft + "px; top:"+(btop+5)+"px;width:"+samplewidth+"px;height:"+(itop-cpgap-btop-10)+"px;"+brdr+"\">"+sampletext+"</div>"d.write(ndiv);ndiv = "<div style=\"position:absolute;left:"+bleft+"px;top:"+itop+"px;\">"+tbl+"</div>"d.write(ndiv);ndiv = "<div id=selcol style=\"width:"+samplewidth+"px;height:100px;color:"+curfgcol+";background-color:"+curbgcol+";position:absolute;left:"+ileft+"px;top:"+(itop+5)+"px;\">"+sampletext+"</div>"d.write(ndiv);}if (ns4){d.write("</layer>")}else{d.write("</div>")}</SCRIPT> <BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR></TD></TR></TBODY></TABLE><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->