JS实现的在线调色板实例

1、本文实例讲述了 JS实现的在线调色板。分享给大家供大家参考，具体如下：运行效果截图如下：具体代码如下：& lt;!DOCTYPE html PUBLIC -/W3C/DTD XHTML 1.0 Tran sitio nal/EN/TR/xhtml1/DTD/xhtml1-tra nsiti on al.dtd>& lt;html >& lt;head >& t;title>ColorSchemer - On li ne Color Scheme Gen erator</title><META NAME=keywords

2、CONTENT=web page design - color - scheme - color scheme - color schemer - colorschemer - rgb - hex - web color - html color - color pick - pick - picker>& lt;META NAME=descriptio n CONTENT=Ge nerate matchi ng color schemes like never before! & gt;& lt;li nk rel=STYLESHEET type=text/css href=defau

3、lt.css ><script Ian guage=JavaScript type=text/javascript src=fu ncs.js > ;</script></head >& t;bodybgcolor=#FCFCF9 text=#OOOOOOmargi nheight=Omargi nwidth=Oleftmargi n=0 topmargi n=0 rightmargi n=0 on Load=Cha ngeColors(51,102,255);>& lt;div ID=Colorl nput>&n bsp;<div c

4、lass=sideHead>Curre nt Color</div>&n bsp;<divclass=curre ntBorder> ;<divID=curre ntColor></div> ;& lt;/div>&n bsp;<form n ame=codes id=codes >&n bsp;<div class=curre ntBorder>&n bsp;<div class= navBox>&n bsp;<table alig n=cen ter cellspaci ng=O cellpa

5、ddi ng=O border= 0>&n bsp;<tr>&n bsp; <td >R: </td >&n bsp;& lt;td > < in puttype=textn ame=rvalue=0maxle ngth=3class=rgbBox></td >&n bsp;</tr>&n bsp;<tr>&n bsp; <td >G:</td >&n bsp;& lt;td >< in puttype=textn ame=gvalue=0maxle ngth=3

6、class=rgbBox></td >&n bsp;</tr>&n bsp;<tr>&n bsp; <td >B:</td >&n bsp;& lt;td >< in puttype=textn ame=bvalue=0maxle ngth=3class=rgbBox></td >&n bsp;</tr>&n bsp;<tr>  <td colspan=2><inputtype=button class=button value=Set RGBon

7、 Click=Cha ngeColors(docume nt.getEleme ntByld(codes).r.value,docume nt.getEleme ntByld(c odes).g.value,docume nt.getEleme ntByld(codes).b.value);> ;</td >&n bsp;</tr>&n bsp;<tr>&n bsp; & lt;tdcolspa n=2>#<i nputtype=text class=hexBoxn ame=hex value=000000 maxle ngth=6>&

8、lt;/td >&n bsp;</tr>&n bsp;<tr>  <td colspan=2><inputtype=button class=button value=Set HEXon Click=SetHex(docume nt.getEleme ntByld(codes).hex.value); ></td > &n bsp;</tr>&n bsp;</table>&n bsp;<i nput type=butt onclass=butt onon Click=Lighte nSch

9、eme(); style=marg in-bottom: 0px;><i nputtype=butt onclass=butt onvalue=Lighte nvalue=Darke nSchemeSchemeon Click=Darke nScheme();>&n bsp;</div> ;</div>&n bsp;</form ></div>& lt;div ID=Wheel alig n=ce nter >&n bsp;&l t;div ID=swatchO class=swatch >&n bsp; & lt;d

10、ivclass=border><divID=0on Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div>&n bsp; & lt;div ID=0RGB class=rgb >255.255.255</div>&n bsp; & lt;div ID=0HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatch1 class=swatch >&n bsp; & lt;di

11、vclass=border><divID=1on Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div>&n bsp; & lt;div ID=1RGB class=rgb >255.255.255</div>&n bsp; & lt;div ID=1HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatch2 class=swatch >&n bsp; & lt;div

12、class=border><divID=2on Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div>&n bsp; & lt;div ID=2RGB class=rgb >255.255.255</div>&n bsp; & lt;div ID=2HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatch3 class=swatch >&n bsp; & lt;divc

13、lass=border><divID=3class=colorclass=colorclass=colorclass=coloron Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div>&n bsp; & lt;div ID=3RGB class=rgb >255.255.255</div>&n bsp; & lt;div ID=3HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID

14、=swatch4 class=swatch >&n bsp; & lt;divclass=border> ;<divon Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div> &n bsp; & lt;div ID=4RGB class=rgb >255.255.255</div> &n bsp; & lt;div ID=4HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=s

15、watch5 class=swatch >&n bsp; & lt;divclass=border> ;<divon Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div> &n bsp; & lt;div ID=5RGB class=rgb >255.255.255</div> &n bsp; & lt;div ID=5HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swa

16、tch6 class=swatch >&n bsp; & lt;divclass=border> ;<divon Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div> &n bsp; & lt;div ID=6RGB class=rgb >255.255.255</div> &n bsp; & lt;div ID=6HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatc

17、h7 class=swatch >&n bsp; & lt;divclass=border> ;<divon Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div> &n bsp; & lt;div ID=7RGB class=rgb >255.255.255</div> &n bsp; & lt;div ID=7HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatch8

18、 class=swatch >&n bsp; & lt;divclass=border> ;<divon Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div> &n bsp; & lt;div ID=8RGB class=rgb >255.255.255</div> &n bsp; & lt;div ID=8HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatch9 c

19、lass=swatch >&n bsp; & lt;divclass=border> ;<divon Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div> &n bsp; & lt;div ID=9RGB class=rgb >255.255.255</div> &n bsp; & lt;div ID=9HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatch10 cl

20、ass=swatch>&n bsp;& lt;divclass=border> ;<divon Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div> &n bsp; & lt;div ID=10RGB class=rgb>255.255.255</div> &n bsp; & lt;div ID=10HEX class=hex>#FFFFFF</div>&n bsp;</div>ID=4class=colorID=5class=colorI

21、D=6class=colorID=7class=colorID=8class=colorID=9class=colorID=10class=color&n bsp;<div ID=swatch11 class=swatch>&n bsp;& lt;divclass=border><divID=11 class=coloron Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div>&n bsp; & lt;div ID=11RGB class=rgb>255.255.255&l

22、t;/div>&n bsp; & lt;div ID=11HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatchm1 class=swatch >&n bsp;& lt;divclass=border> ;&l t;divID=m1 class=coloron Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div>&n bsp; & lt;div ID=m1RGB class=rgb &

23、gt;255.255.255</div>&n bsp; & lt;div ID=m1HEX class=hex>#FFFFFF</div>&n bsp;</div>&n bsp;<div ID=swatchm2 class=swatch >&n bsp;& lt;divclass=border>& lt;divID=m2 class=coloron Click=SetHex(this.style.backgrou ndColor);> & lt;/div></div>&n bsp; & lt;div ID=m2RGB class=rgb >255.255.255</div>&n bsp; & lt;div ID=m2HEX class=hex>#FFFFFF</div>&n bs