<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>颜色值相互转换---Color---www.cnblogs.com/kuikui</title>
<style type="text/css">
td, body{font-size: 12px;}
#primcolor, #drakcolor, #lightcolor, #websafecolor{width: 100px;height: 100px;border: 1px solid #808080;}
#inputcolor{border: 0;border-bottom: 1px solid #000;width: 50px;height: 20px;}
#setbutton{border: 1px solid #000;}
</style>
<script type="text/javascript">
var Color = function () {
//将hex颜色值str转化成rgb数组
this.HexToRgb = function (str) {
var r = /^\#?[0-9a-f]{6}$/;
//test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
if (!r.test(str)) return window.alert("输入错误的hex颜色值");
//replace替换查找的到的字符串
str = str.replace("#", "");
//match得到查询数组
var hxs = str.match(/../g);
for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
return hxs;
}
//将rgb颜色值为a,b,c转化成hex颜色值
this.RgbToHex = function (a, b, c) {
var r = /^\d{1,3}$/;
if (!r.test(a) || !r.test(b) || !r.test(c)) return window.alert("输入错误的rgb颜色值");
var hexs = [a.toString(16), b.toString(16), c.toString(16)];
for (var i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = "0" + hexs[i];
return "#" + hexs.join("");
}
//得到hex颜色值为color的加深颜色值，level为加深的程度，限0-1之间
this.getDarkColor = function (color, level) {
var r = /^\#?[0-9a-f]{6}$/;
if (!r.test(color)) return window.alert("输入错误的hex颜色值");
var rgbc = this.HexToRgb(color);
//floor 向下取整
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}
//得到hex颜色值为color的减淡颜色值，level为减淡的程度，限0-1之间
this.getLightColor = function (color, level) {
var r = /^\#?[0-9a-f]{6}$/;
if (!r.test(color)) return window.alert("输入错误的hex颜色值");
var rgbc = this.HexToRgb(color);
for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}
//得到hex颜色值为color的web安全色
this.getWebSafeColor = function (color) {
var r = /^\#?[0-9a-f]{6}$/;
if (!r.test(color)) return window.alert("输入错误的hex颜色值");
var rgbc = this.HexToRgb(color);
for (var i = 0; i < 3; i++) {
var q1 = Math.floor(rgbc[i] / 51) * 51;
//ceil向上取整
var q2 = Math.ceil(rgbc[i] / 51) * 51;
//abs绝对值
if (Math.abs(q1 - rgbc[i]) <= Math.abs(q2 - rgbc[i])) rgbc[i] = q1;
else rgbc[i] = q2;
}
return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
}
}
</script>
</head>
<body>
<table cellspacing="10" border="0">
<tr>
<td>
<div id="primcolor">
</div>
（原始颜色）<br />
hex:<span></span><br />
rgb:<span></span>
</td>
<td align="center">
颜色：#<input type="text" id="inputcolor" maxlength="6" onfocus="select()" />
<input type="button" value="设定" id="setbutton" onclick="setC()" />
</td>
</tr>
</table>
<table cellspacing="10" border="0">
<tr>
<td>
<div id="drakcolor">
</div>
（加深颜色）<br />
hex:<span></span><br />
rgb:<span></span>
</td>
<td>
<div id="lightcolor">
</div>
（减淡颜色）<br />
hex:<span></span><br />
rgb:<span></span>
</td>
<td>
<div id="websafecolor">
</div>
（Web安全色）<br />
hex:<span></span><br />
rgb:<span></span>
</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript">
var test = new Color();
function insetpane(tid, colorvalue) {
var spans = document.getElementById(tid).parentNode.getElementsByTagName("span");
try {
document.getElementById(tid).style.backgroundColor = "#" + colorvalue.replace("#", "");
spans[0].innerHTML = "#" + colorvalue.replace("#", "");
spans[1].innerHTML = test.HexToRgb(colorvalue).join(",");
} catch (e) {
}
}
function setC() {
var v = document.getElementById("inputcolor").value;
insetpane("primcolor", v);
insetpane("drakcolor", test.getDarkColor(v, 0.5));
insetpane("lightcolor", test.getLightColor(v, 0.5));
insetpane("websafecolor", test.getWebSafeColor(v));
}
</script>
分享到：
相关推荐
14.19 将URL转化为16进制 14.20 小写金额转换为大写 14.21 通过两点坐标计算直线距离 14.22 随机抽取彩票 14.23 实时计算折扣 14.24 实用计算器 14.25 前面补0的方法 第15章 图形、图像的特效 15.1 图片变形效果 ...
在实际工作的项目中，经常会用到颜色的转换，一般是 RGBA（三原色+透明度） 转换为 十六进制颜色，或者十六进制颜色转换为 RGBA，此工具提供了 JavaScript 实现的双向转换的方法工具。
以十六进制颜色值表示的时间一个时钟，以十六进制颜色值表示的时间不久前，我在一个项目中看到一个时钟，我发现该时间（格式为00:00:00）非常适合十六进制代码。 我决定使用Vanilla JS创建一个非常小的项目，以彩色...
源文件程序天下JAVASCRIPT实例自学手册 ...8.2.2 设置文档颜色值 8.2.3 往文档写入新内容 8.2.4 常见属性和方法汇总 8.3 body元素对象 8.3.1 获取body元素对象信息 8.3.2 常见属性和方法汇总 8.4 本章小结
14.19 将URL转化为16进制 14.20 小写金额转换为大写 14.21 通过两点坐标计算直线距离 14.22 随机抽取彩票 14.23 实时计算折扣 14.24 实用计算器 14.25 前面补0的方法 第15章 图形、图像的特效 15.1 图片变形效果 ...
JavaScript电子书，包括了JavaScript的大部分知识，...8.2.2 设置文档颜色值 8.2.3 往文档写入新内容 8.2.4 常见属性和方法汇总 8.3 body元素对象 8.3.1 获取body元素对象信息 8.3.2 常见属性和方法汇总 8.4 本章小结
程序中先通过GetColor把一般的颜色表示形式转化成一个用红(r)、绿(g)、蓝(b)三个颜色值作元素的集合。 那就首先要知道有什么颜色表示形式，从w3c的Colors部分可以知道有以下形式： 关键词模式： em { color: red } ...
开尔文到rgb - 开尔文温度在1,500和40,000之间大约为[r, g, b]颜色。 Tanner Helland的详细信息和原始实现， 。例子 var kelvinToRgb = require ( 'kelvin-to-rgb' )var K = 1600// get [ r, g, b ] colorvar rgb = ...
142.如何将RGB值转换成十六进制值 第9章 使用XML 143.如何创建和显示一个XML文档（示例一） 143.如何创建和显示一个XML文档（示例二） 143.如何创建和显示一个XML文档（示例三） 144.如何在ASP环境下应用XML 145....
"script": 将响应作为Javascript语句求值，并返回纯文本。不缓存此脚本，除非设置了cache选项。设置为"script"类型会将post方法转换为get方法。 "json": 将响应作为JSON求值，并返回一个Javascript对象。 ...
-将所有的示例转化为英语版本。 -修正Tree控件的一个BUG（定义Mappings属性时）。 +PageManager.Instance应该存在于HttpContext.Current，而不是一个全局变量。 -这个BUG导致Asp.net compatibility中的示例无法...
-将所有的示例转化为英语版本。 -修正Tree控件的一个BUG（定义Mappings属性时）。 +PageManager.Instance应该存在于HttpContext.Current，而不是一个全局变量。 -这个BUG导致Asp.net compatibility中的示例无法...
<br>2007/7/04 Version 3.1.9 beta <br>Updates: 1) 增强页面信息采集功能的链接分析能力,当采集图片或超链接的时候会自动将相对路径转化为真实的网络路径,并且修正了采集功能的一些已知BUG。...
实例075 动态改变页面中单元格的背景颜色 109 实例076 屏蔽偶数次的数据输出 110 实例077 跳过数据输出中指定的记录 111 实例078 执行指定次数的循环 112 2.7 自定义函数 113 实例079 自定义函数截取中文字符串 113 ...
实例075 动态改变页面中单元格的背景颜色 109 实例076 屏蔽偶数次的数据输出 110 实例077 跳过数据输出中指定的记录 111 实例078 执行指定次数的循环 112 2.7 自定义函数 113 实例079 自定义函数截取中文字符串 113 ...
完整的在.net后台执行javascript脚本集合 ASP.NET 中的正则表达式 常用的匹配正则表达式和实例 经典正则表达式 delegate vs. event 我是谁？[C#] 表达式计算引擎 正式发布表达式计算引擎WfcExp V0.9(附源码) 运算...