首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

yenange

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery表单获取和失去焦点输入框提示效果的实例代码
Aug 01 Javascript
js Array操作的最简短最容易理解方法
Dec 09 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
node.js中的console.assert方法使用说明
Dec 10 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
10个经典的网页鼠标特效代码
Jan 09 Javascript
fastadmin中调用js的方法
May 14 Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 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
dockerfile(1) EditText(1) SQLite3(1) Selenium(1) reduce(2) 短信验证码(1) Tsmoothie(1) Django(9) filter(1) TextInputLayout(1)
You might like
PHILIPS D1835/D1875的电路分析与打理
2021/03/02 无线电
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
javascript 常用方法总结
2009/06/03 Javascript
事件模型在各浏览器中存在差异
2010/10/20 Javascript
javascript 禁用IE工具栏,导航栏等等实现代码
2013/04/01 Javascript
javascript和jquery修改a标签的href属性
2013/12/16 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
防止按钮在短时间内被多次点击的方法
2014/03/10 Javascript
JS中使用Array函数shift和pop创建可忽略参数的例子
2014/05/28 Javascript
Node.js中安全调用系统命令的方法（避免注入安全漏洞）
2014/12/05 Javascript
js实现的简洁网页滑动tab菜单效果代码
2015/08/24 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
JS严格模式知识点总结
2018/02/27 Javascript
简单介绍react redux的中间件的使用
2018/04/06 Javascript
jQuery+CSS实现的标签页效果示例【测试可用】
2018/08/14 jQuery
axios全局注册,设置token,以及全局设置url请求网段的方法
2018/09/25 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
学习python之编写简单乘法口诀表实现代码
2016/02/27 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
python利用百度AI实现文字识别功能
2018/11/27 Python
pyqt5 QProgressBar清空进度条的实例
2019/06/21 Python
django项目登录中使用图片验证码的实现方法
2019/08/15 Python
ubuntu上安装python的实例方法
2019/09/30 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
HTML5 canvas绘制的玫瑰花效果
2014/05/29 HTML / CSS
波兰品牌内衣及泳装网上商店：Astratex.pl
2017/02/03 全球购物
中职生自我鉴定范文
2013/10/03 职场文书
销售助理岗位职责
2014/02/21 职场文书
个人年终总结范文
2015/03/09 职场文书