JS实现的在线调色板实例(附demo源码下载)


Posted in Javascript onMarch 01, 2016

本文实例讲述了JS实现的在线调色板。分享给大家供大家参考,具体如下:

运行效果截图如下:

JS实现的在线调色板实例(附demo源码下载)

具体代码如下:

<!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 NAME="keywords" CONTENT="web page design - color - scheme - color scheme - color schemer - colorschemer - rgb - hex - web color - html color - color pick - pick - picker">
<META NAME="description" CONTENT="Generate matching color schemes like never before!">
<link rel="STYLESHEET" type="text/css" href="default.css">
<script language="JavaScript" type="text/javascript" src="funcs.js"></script>
</head>
<body bgcolor="#FCFCF9" text="#000000" marginheight="0" marginwidth="0" leftmargin="0" topmargin="0" rightmargin="0" onLoad="ChangeColors(51,102,255);">
<div ID="ColorInput">
 <div class="sideHead">Current Color</div>
 <div class="currentBorder"><div ID="currentColor"> </div></div>
 <form name="codes" id="codes">
 <div class="currentBorder">
 <div class="navBox">
 <table align="center" cellspacing="0" cellpadding="0" border="0">
 <tr>
  <td>R:</td>
  <td><input type="text" name="r" value="0" maxlength="3" class="rgbBox"></td>
 </tr>
 <tr>
  <td>G:</td>
  <td><input type="text" name="g" value="0" maxlength="3" class="rgbBox"></td>
 </tr>
 <tr>
  <td>B:</td>
  <td><input type="text" name="b" value="0" maxlength="3" class="rgbBox"></td>
 </tr>
 <tr>
  <td colspan="2"><input type="button" class="button" value="Set RGB" onClick="ChangeColors(document.getElementById('codes').r.value,document.getElementById('codes').g.value,document.getElementById('codes').b.value);"></td>
 </tr>
 <tr>
  <td colspan="2">#<input type="text" class="hexBox" name="hex" value="000000" maxlength="6"></td>
 </tr>
 <tr>
  <td colspan="2"><input type="button" class="button" value="Set HEX" onClick="SetHex(document.getElementById('codes').hex.value);"></td>
 </tr>
 </table>
 <input type="button" class="button" value="Lighten Scheme" onClick="LightenScheme();" style="margin-bottom: 0px;">
<input type="button" class="button" value="Darken Scheme" onClick="DarkenScheme();">
 </div></div>
 </form>
</div>
<div ID="Wheel" align="center">
 <div ID="swatch0" class="swatch">
  <div class="border"><div ID="0" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="0RGB" class="rgb">255.255.255</div>
  <div ID="0HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch1" class="swatch">
  <div class="border"><div ID="1" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="1RGB" class="rgb">255.255.255</div>
  <div ID="1HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch2" class="swatch">
  <div class="border"><div ID="2" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="2RGB" class="rgb">255.255.255</div>
  <div ID="2HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch3" class="swatch">
  <div class="border"><div ID="3" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="3RGB" class="rgb">255.255.255</div>
  <div ID="3HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch4" class="swatch">
  <div class="border"><div ID="4" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="4RGB" class="rgb">255.255.255</div>
  <div ID="4HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch5" class="swatch">
  <div class="border"><div ID="5" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="5RGB" class="rgb">255.255.255</div>
  <div ID="5HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch6" class="swatch">
  <div class="border"><div ID="6" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="6RGB" class="rgb">255.255.255</div>
  <div ID="6HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch7" class="swatch">
  <div class="border"><div ID="7" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="7RGB" class="rgb">255.255.255</div>
  <div ID="7HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch8" class="swatch">
  <div class="border"><div ID="8" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="8RGB" class="rgb">255.255.255</div>
  <div ID="8HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch9" class="swatch">
  <div class="border"><div ID="9" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="9RGB" class="rgb">255.255.255</div>
  <div ID="9HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch10" class="swatch">
  <div class="border"><div ID="10" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="10RGB" class="rgb">255.255.255</div>
  <div ID="10HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatch11" class="swatch">
  <div class="border"><div ID="11" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="11RGB" class="rgb">255.255.255</div>
  <div ID="11HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatchm1" class="swatch">
  <div class="border"><div ID="m1" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="m1RGB" class="rgb">255.255.255</div>
  <div ID="m1HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatchm2" class="swatch">
  <div class="border"><div ID="m2" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="m2RGB" class="rgb">255.255.255</div>
  <div ID="m2HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatchm3" class="swatch">
  <div class="border"><div ID="m3" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="m3RGB" class="rgb">255.255.255</div>
  <div ID="m3HEX" class="hex">#FFFFFF</div>
 </div>
 <div ID="swatchm4" class="swatch">
  <div class="border"><div ID="m4" class="color" onClick="SetHex(this.style.backgroundColor);"> </div></div>
  <div ID="m4RGB" class="rgb">255.255.255</div>
  <div ID="m4HEX" class="hex">#FFFFFF</div>
 </div>
</div>
<script language="JavaScript">DrawPalette();</script>
</body>
</html>

完整实例代码点击此处本站下载。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
鼠标滑上去后图片放大浮出效果的js代码
May 28 Javascript
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
js动态修改input输入框的type属性(实现方法解析)
Nov 13 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
JavaScript判断变量是否为数组的方法(Array)
Feb 24 Javascript
Jquery实现$.fn.extend和$.extend函数
Apr 14 Javascript
javascript 用函数实现继承详解
May 28 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 #Javascript
JavaScript实现简洁的俄罗斯方块完整实例
Mar 01 #Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 #Javascript
JS实现图片平面旋转的方法
Mar 01 #Javascript
JS显示日历和天气的方法
Mar 01 #Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
Mar 01 #Javascript
jQuery获取某天的农历日期并判断是否除夕或新年的方法
Mar 01 #Javascript
You might like
一漂亮的PHP图片验证码实例
2014/03/21 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
php判断用户是否关注微信公众号
2016/07/22 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
php读取本地json文件的实例
2018/03/07 PHP
PHP PDOStatement::fetchColumn讲解
2019/01/31 PHP
JQuery select标签操作代码段
2010/05/16 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
js图片处理示例代码
2014/05/12 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
JavaScript中的对象和原型(一)
2016/08/12 Javascript
详解基于vue-router的动态权限控制实现方案
2017/09/28 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
小程序点赞收藏功能的实现代码示例
2018/09/07 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
Python计算字符宽度的方法
2016/06/14 Python
Python中操作mysql的pymysql模块详解
2016/09/13 Python
详解如何用OpenCV + Python 实现人脸识别
2017/10/20 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
python模块导入的方法
2019/10/24 Python
详解python 中in 的 用法
2019/12/12 Python
numpy库reshape用法详解
2020/04/19 Python
在CentOS7下安装Python3教程解析
2020/07/09 Python
俄罗斯披萨、寿司和面食送货到家服务:2 Берега
2019/12/15 全球购物
实用求职信范文分享
2013/12/25 职场文书
军人违纪检讨书
2014/02/04 职场文书
职业女性的职业规划
2014/03/04 职场文书
商务司机岗位职责
2015/04/10 职场文书
社会实践活动总结格式
2015/05/11 职场文书
CSS3 实现NES游戏机的示例代码
2021/04/21 HTML / CSS
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js