这篇文章主要介绍了JS实现的在线调色板,可实现响应鼠标点击动态改变调色板颜色的功能,涉及JavaScript针对页面元素属性的动态操作与计算技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
本文实例讲述了JS实现的在线调色板。分享给大家供大家参考，具体如下：
运行效果截图如下：
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>ColorSchemer - Online Color Scheme Generator</title> <META CONTENT="web page design - color - scheme - color scheme - color schemer - colorschemer - rgb - hex - web color - html color - color pick - pick - picker"> <META CONTENT="Generate matching color schemes like never before!"> <link type="text/css" href="https://www.jb51.net/default.css"> <script language="JavaScript" type="text/javascript" src="https://www.jb51.net/funcs.js"></script> </head> <body bgcolor="#FCFCF9" text="#000000" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" rightmargin="0"> <div> <div>Current Color</div> <div><div> </div></div> <form> <div> <div> <table cellspacing="0" cellpadding="0"> <tr> <td>R:</td> <td><input type="text" value="0" maxlength="3"></td> </tr> <tr> <td>G:</td> <td><input type="text" value="0" maxlength="3"></td> </tr> <tr> <td>B:</td> <td><input type="text" value="0" maxlength="3"></td> </tr> <tr> <td colspan="2"><input type="button" value="Set RGB"></td> </tr> <tr> <td colspan="2">#<input type="text" value="000000" maxlength="6"></td> </tr> <tr> <td colspan="2"><input type="button" value="Set HEX"></td> </tr> </table> <input type="button" value="Lighten Scheme"> <input type="button" value="Darken Scheme"> </div></div> </form> </div> <div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> <div> <div><div> </div></div> <div>255.255.255</div> <div>#FFFFFF</div> </div> </div> <script language="JavaScript">DrawPalette();</script> </body> </html>
完整实例代码点击此处本站下载。