首页
所有分类
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 instanceof 与typeof使用说明
Jan 11 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
AngularJS实现表单手动验证和表单自动验证
Dec 09 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
使用DeviceOne实现微信小程序功能
Dec 29 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
官方推荐react-navigation的具体使用详解
May 08 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
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
富碳陨石(1) 大脑(1) RNA(2) 美国航天局(1) 陨石(1) DNA(2) iOS15(1) iPhone(1) 数据(1) 嘧啶碱基(2)
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
JQuery1.4+ Ajax IE8 内存泄漏问题
2010/10/15 Javascript
javascript面向对象入门基础详细介绍
2012/09/05 Javascript
js数字转换为float,取N位小数
2014/02/08 Javascript
js实现可兼容IE、FF、Chrome、Opera及Safari的音乐播放器
2015/02/11 Javascript
五种js判断是否为整数类型方式
2015/12/03 Javascript
JavaScript驾驭网页－DOM
2016/03/24 Javascript
Javascript类型系统之undefined和null浅析
2016/07/13 Javascript
从零开始学习Node.js系列教程三：图片上传和显示方法示例
2017/04/13 Javascript
BootStrap 导航条实例代码
2017/05/18 Javascript
基于BootStrap的前端分页带省略号和上下页效果
2017/05/18 Javascript
深入理解vue.js中的v-if和v-show
2017/06/22 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
JS实现使用POST方式发送请求
2019/08/30 Javascript
浅谈Three.js截图并下载的大坑
2019/11/01 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
[37:22]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第一局
2016/02/28 DOTA
详解python3实现的web端json通信协议
2016/12/29 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
wxPython实现绘图小例子
2019/11/19 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
python利用proxybroker构建爬虫免费IP代理池的实现
2021/02/21 Python
艺术爱好者的自我评价分享
2013/10/08 职场文书
宿舍违规用电检讨书
2014/02/16 职场文书
大学毕业论文致谢词
2015/05/14 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
python文件与路径操作神器 pathlib
2022/04/01 Python