编程 Javascript

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

Posted in Javascript onMarch 01, 2016

本文实例讲述了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 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 学习笔记 element属性控制

Jul 23 Javascript

两个select多选模式的选项相互移动(示例代码)

Jan 11 Javascript

js操作模态窗口及父子窗口间相互传值示例

Jun 09 Javascript

实现前后端数据交互方法汇总

Apr 07 Javascript

Bootstrap编写导航栏和登陆框

May 30 Javascript

JS使用JSON作为参数实例分析

Jun 23 Javascript

javascript实现简单的on事件绑定

Aug 23 Javascript

Bootstrap table表格简单操作

Feb 07 Javascript

vue2.0结合DataTable插件实现表格动态刷新的方法详解

Mar 17 Javascript

关于vue单文件中引用路径的处理方法

Jan 08 Javascript

Vue前端开发规范整理(推荐)

Apr 23 Javascript

vue cli3 配置proxy代理无效的解决

Oct 30 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 output buffering缓存及程序缓存深入解析

2013/07/15 PHP

PHP创建PowerPoint2007文档的方法

2015/12/10 PHP

PHP中抽象类和抽象方法概念与用法分析

2016/05/24 PHP

Yii2使用表单上传文件的实例代码

2017/08/03 PHP

PHP删除数组中特定元素的两种方法

2019/02/28 PHP

jQuery实现类似淘宝购物车全选状态示例

2013/06/26 Javascript

js动态给table添加/删除tr的方法

2013/08/02 Javascript

JavaScript获取flash对象与网上的有所不同

2014/04/21 Javascript

javascript实现回到顶部特效

2015/05/06 Javascript

jQuery中serializeArray()与serialize()的区别实例分析

2015/12/09 Javascript

node.js使用cluster实现多进程

2016/03/17 Javascript

JS中如何实现Laravel的route函数详解

2017/02/12 Javascript

bootstrap paginator分页前后台用法示例

2017/06/17 Javascript

JavaScript实现全选取消效果

2017/12/14 Javascript

原生JS进行前后端同构

2018/04/22 Javascript

实例解析Vue.js下载方式及基本概念

2018/05/11 Javascript

浅谈React中组件逻辑复用的那些事儿

2020/05/21 Javascript

Python文本相似性计算之编辑距离详解

2016/11/28 Python

TensorFlow 滑动平均的示例代码

2018/06/19 Python

基于python爬取有道翻译过程图解

2020/03/31 Python

什么是python的函数体

2020/06/19 Python

通过实例了解python__slots__使用方法

2020/09/14 Python

Rentalcars.com中国：世界上最大的在线汽车租赁服务

2019/08/22 全球购物

美国最大和最受信任的二手轮胎商店：Bestusedtires.com

2020/06/02 全球购物

Java工程师面试集锦之Spring框架

2013/06/16 面试题

介绍一下SQL Server的全文索引

2013/08/15 面试题

2014国培学习感言

2014/03/05 职场文书

班主任班级寄语大全

2014/04/04 职场文书

文明市民先进事迹

2014/05/15 职场文书

交通事故赔偿协议书怎么写

2014/10/04 职场文书

2014年加油站站长工作总结

2014/12/23 职场文书

幼儿园教师管理制度

2015/08/05 职场文书

电工实训心得体会

2016/01/14 职场文书

倡议书怎么写？

2019/04/11 职场文书

Django模型层实现多表关系创建和多表操作

2021/07/21 Python

前端实现滑动按钮AJAX与后端交互的示例代码

2022/02/24 Javascript