js实现可得到不同颜色值的颜色选择器实例

本文实例讲述了js实现可得到不同颜色值的颜色选择器。分享给大家供大家参考。具体实现方法如下：

代码如下:

<html>
<head>
<title>js颜色选择器，可得到不同的颜色值</title>
</head>
<body>
<input id=kkk1 style=position:absolute;left:0;top:0>
<input id=kkk2 style=position:absolute;left:200;top:0>
<input id=kkk3 style=position:absolute;left:400;top:0>
<input id=kkk4 style=position:absolute;left:600;top:0>
<div id=RainBowDiv style='position:absolute;left:200;top:30;'></div>
<script>
var iW = '70';//共有6种颜色，每种颜色的宽为iW。iW*6为色带的宽。
var iH = '400';//iH为色带的高。
//计算HSV颜色代码。
function HSV(){
kkk1.value = 'X:'+event.offsetX+'   Y:'+event.offsetY;
var H,S,V;
var pY = event.offsetY;
if(pY == 0){H = S = 0; V = 100;}
else{
 if(pY == iH-1) H = S = V = 0;
 else{
  H = Math.floor(360*event.offsetX/(iW*6));
  S = Math.round(50*(iH-pY)/(iH/2));
  V = Math.round(100-50*pY/iH);
  }
 }
kkk2.value='HSV('+H+','+S+'%,'+V+'%)';
HSVtoRGB(H,S/100,V/100);
}

//计算RGB颜色代码。
function HSVtoRGB(h,s,v){
var i, f ,p1 ,p2 ,p3;
var r = g = b = 0;
if(s < 0) s=0;
if(s > 1) s=1;
if(v < 0) v=0;
if(v > 1) v=1;
h %= 360;
if(h < 0) h+=360;
h /= 60;
i = Math.floor(h);
f = h-i;
p1 = v*(1-s);
p2 = v*(1-s*f);
p3 = v*(1-s*(1-f));
if(i == 0){r=v; g=p3; b=p1;}
else if(i == 1){r=p2; g=v; b=p1;}
else if(i == 2){r=p1; g=v; b=p3;}
else if(i == 3){r=p1; g=p2; b=v;}
else if(i == 4){r=p3; g=p1; b=v;}
else if(i == 5){r=v; g=p1; b=p2;}
kkk3.value='RGB('+Math.round(r*255)+','+Math.round(g*255)+','+Math.round(b*255)+')';
RGBtoHTML(Math.round(r*255),Math.round(g*255),Math.round(b*255))
}

//计算HTML颜色代码。
function RGBtoHTML(r,g,b){
r=(r>=16)?r.toString(16):('0'+r.toString(16))
g=(g>=16)?g.toString(16):('0'+g.toString(16))
b=(b>=16)?b.toString(16):('0'+b.toString(16))
kkk4.value='HTML #'+r+g+b;
}

function window.onload(){
var RainBow = new Array(255,0,0,  255,255,0,  0,255,0,  0,255,255,  0,0,255,  255,0,255,  255,0,0);
for(var i=0;i<6;i++){
 var R1 = RainBow[i*3];
 var G1 = RainBow[i*3+1];
 var B1 = RainBow[i*3+2];
 var R2 = RainBow[(i+1)*3];
 var G2 = RainBow[(i+1)*3+1];
 var B2 = RainBow[(i+1)*3+2];
 RainBowDiv.innerHTML += "<div style='position:absolute;left:"+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R1+","+G1+","+B1+");'></div><div style='position:absolute;left:"+i*iW+";top:0;width:"+iW+";height:"+iH+";background:rgb("+R2+","+G2+","+B2+");filter:alpha(opacity=0,finishopacity=100,Style=1);'></div>"
 }
RainBowDiv.innerHTML += "<div style=position:absolute;left:0;top:0;width:"+6*iW+";height:"+iH+";background:rgb(128,128,128);filter:alpha(opacity=0,finishOpacity=100,style=1,starty=0,finishy=100,startx=0,finishx=0)></div><div style='position:absolute;left:0;top:0;width:"+(6*iW+1)+";height:"+iH+";' onmousemove=HSV()></div>"
}
</script>
</body>
</html>

更多js颜色操作可参考本站颜色工具：

RGB颜色编码生成器

在线网页配色工具

RGB颜色查询对照表_颜色代码表_颜色的英文名称大全

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • Javascript实现Web颜色值转换

    Javascript实现Web颜色值转换

    最近一直忙碌于完成业务需求,好长时间没有写博客了.今天稍微有些时间,翻看了一下最近项目中的一些前端代码,看到Web颜色转换功能的时候,突然想到当我们在做一些颜色设置/编辑的需求时,经常会涉及到各种颜色值格式的互换.于是我决定记录一下我在做这一部分功能的时候是如何实现的,写下来和大家分享一下,希望读者们各抒己见,多多交流. 先看看问题 问题一,当我们在进行网页前端开发的时候,经常会使用 dom.style.backgroundColor = "#f00" 来设置某个 DOM 元素的背景颜

  • 用js实现的十进制的颜色值转换成十六进制的代码

    function MyColor(name,r,g,b){ this.name=name; this.red=r; this.green=g; this.blue=b; } MyColor.prototype.hexValue=function(){ var hR=this.red.toString(16); var hG=this.green.toString(16); var hB=this.blue.toString(16); return "#"+(this.red [Ctrl

  • JavaScript实现16进制颜色值转RGB的方法

    JavaScript实现16进制颜色值转RGB的方法

    本文实例讲述了JavaScript实现16进制颜色值转RGB的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/19

  • RGB颜色值转HTML十六进制(HEX)代码的JS函数

    复制代码 代码如下: //转到固定长度的十六进制字符串,不够则补0 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } //妈的,怎么都没搜到怎么用javascript找出一个背景色的数值,只好自己解析 function rgb2hex(rgb) { //nnd, Firefox / IE not the

  • 用javascript获取任意颜色的更亮或更暗颜色值示例代码

    前言 本文主要给大家介绍的是关于利用javascript获取任意颜色更亮或更暗颜色值的相关内容,下面话不多说,来一起看看详细的介绍: 预处理CSS,比如Sass和less可以通过设定一个特定值,让任何颜色变得更亮或者更暗.但是在javascript中却没有这种方法.下面这个方法能在javascript中得到一个更亮或者更暗的值,通过一个给定的十六进制颜色值(比如#F06D06,或者没有#) 示例代码 function LightenDarkenColor(col, amt) { var useP

  • js获取随机颜色值的函数

    收集一个函数:获取随机颜色值 复制代码 代码如下: function getRandomColor(){ return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); } 说明: 1.16777215为16进制的颜色ffffff转成10进制的数字 2.>>数字取整 3.转成16进制不足6位的以0来补充 在线演示代码: js随机颜色 document

  • javascript实现十六进制颜色值（HEX）和RGB格式相互转换

    在日常开发中,经常会用到不同格式的颜色域值之间的相互转换,以下给出一种解决方法. 复制代码 代码如下: //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; /*RGB颜色转换为16进制*/ String.prototype.colorHex = function(){     var that = this;     if(/^(rgb|RGB)/.test(that)){         var aColor = th

  • js实现可得到不同颜色值的颜色选择器实例

    本文实例讲述了js实现可得到不同颜色值的颜色选择器.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js颜色选择器,可得到不同的颜色值</title> </head> <body> <input id=kkk1 style=position:absolute;left:0;top:0> <input id=kkk2 style=position:absolut

  • JS实现简单面向对象的颜色选择器实例

    本文实例讲述了JS实现简单面向对象的颜色选择器.分享给大家供大家参考,具体如下: <!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"> <he

  • JS实现在页面随时自定义背景颜色的方法

    本文实例讲述了JS实现在页面随时自定义背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>JS实现在页面随时自定义背景颜色</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin //以下代码将输入框及其所在的层写进窗口. document.writeln('<div align="cente

  • js实现的简单radio背景颜色选择器代码

    js实现的简单radio背景颜色选择器代码

    本文实例讲述了js实现的简单radio背景颜色选择器.分享给大家供大家参考.具体如下: 这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHT

  • js颜色选择器代码[firefox不支持]

    最简单的,在body区域加入: 复制代码 代码如下: <OBJECT id="dlgHelper" CLASSID="clsid:3050f819-98b5-11cf-bb82-00aa00bdce0b" width="0" height="0"></OBJECT> 调用的JS: 复制代码 代码如下: <script type="text/javascript"> var

  • js 颜色选择器（兼容firefox）

    复制代码 代码如下: <!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> <meta http-equiv=&qu

  • JavaScript获取系统自带的颜色选择器功能（图）

    JavaScript获取系统自带的颜色选择器功能（图）

    效果如图所示:下面是获取系统自带的颜色选择器的代码: function $(obj) { return document.getElementById(obj); } function pickColor() { if (!window.isIE) return; var sColor = $('dlgHelper').ChooseColorDlg(); var color = sColor.toString(16); while (color.length [Ctrl+A 全选 注:如需引入外

  • 颜色选择器 Color Picker,IE,Firefox,Opera,Safar

    from: 颜色选择器 colorpickerhttp://jscolor.com/http://dematte.at/colorPicker/http://www.free-color-picker.com/color-picker-samples.phphttp://www.nogray.com/color_picker.phphttp://www.mattkruse.com/javascript/colorpicker/ ColorPicker2.js代码 复制代码 代码如下: // ==

  • HTML颜色选择器实现代码

    HTML颜色选择器 范围:#000 - #FFF //  '); } document.writeln(' '); var begin = 0; for (var i = 0; i '); for (var g = begin; g '); } } document.writeln(' '); } } // ]]> [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • js监听input输入框值的实时变化实例

    1.在元素上同时绑定 oninput 和onporpertychanger事件 例: <script type="text/JavaScript"> function aa(e){alert("inputting!!");} </script> <input type="text" id="a" oninput="aa(event)" onporpertychange=&quo

随机推荐