首页
所有分类
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 相关文章推荐
javascript实现 在光标处插入指定内容
May 25 Javascript
JavaScript初学者应注意的七个细节详细介绍
Dec 27 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
Jan 23 Javascript
jquery 实现窗口的最大化不论什么情况
Sep 03 Javascript
JS图片自动轮换效果实现思路附截图
Apr 30 Javascript
javascript显式类型转换实例分析
Apr 25 Javascript
JQ技术实现注册页面带有校验密码强度
Jul 27 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
Mar 05 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 Javascript
jQuery实现日历效果
Sep 11 jQuery
微信小程序实现可长按移动控件
Nov 01 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
PL450(1) PL550(1) SRF-M100(1) SHARP(1) 低放电路(1) ICF-SW7600(1) GF515(1) 德劲1102(1) 乐信(1) RP2100(1)
You might like
php自定义加密与解密程序实例
2014/12/31 PHP
PHP调用Linux命令权限不足问题解决方法
2015/02/07 PHP
PHP实现指定字段的多维数组排序函数分享
2015/03/09 PHP
php内嵌函数用法实例
2015/03/20 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
Zend Framework教程之Zend_Config_Xml用法分析
2016/03/23 PHP
PHP页面跳转实现延时跳转的方法
2016/12/10 PHP
laravel-admin 中列表筛选方法
2019/10/03 PHP
prototype1.4中文手册
2006/09/22 Javascript
NodeJS的url截取模块url-extract的使用实例
2013/11/18 NodeJs
Javascript 遍历页面text控件详解
2014/01/06 Javascript
node.js中的fs.fchown方法使用说明
2014/12/16 Javascript
浅析如何利用JavaScript进行语音识别
2016/10/27 Javascript
微信小程序 toast 详解及实例代码
2016/11/09 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
2017/08/24 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
4个顶级开源JavaScript图表库
2018/09/29 Javascript
详解使用webpack+electron+reactJs开发windows桌面应用
2019/02/01 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
[02:43]2014DOTA2国际邀请赛 官方Alliance战队纪录片
2014/07/14 DOTA
Python实现SVN的目录周期性备份实例
2015/07/17 Python
python中Apriori算法实现讲解
2017/12/10 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
Python 解析简单的XML数据
2020/07/24 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
python3实现语音转文字(语音识别)和文字转语音(语音合成)
2020/10/14 Python
文案策划求职信
2014/04/14 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
夫妻忠诚协议范文
2014/11/16 职场文书