首页
所有分类
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 相关文章推荐
鼠标滑上去后图片放大浮出效果的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
森海(1) MX500(1) SRF-S83(1) 根德(2) SRF-S84(1) S2000(3) 台湾(1) PL660(1) 松下(1) 南麂列岛(1)
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