脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js实现可得到不同颜色值的颜色选择器

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

 更新时间：2015年02月28日 10:09:10   作者：代码家园  
这篇文章主要介绍了js实现可得到不同颜色值的颜色选择器,实例分析了javascript颜色操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • TypeScript 中接口详解

    TypeScript 中接口详解

    TypeScript核心设计原则之一就是类型检查，通过使用接口(Interfaces)可以进行类型检查，满足传统面向对象思想，利于有效开发，有效避免类型转换问题。
    2015-06-06
  • JavaScript中Cookie操作实例

    JavaScript中Cookie操作实例

    这篇文章主要介绍了JavaScript中Cookie操作实例,本文先是讲解了Cookie的语法,然后给了实际操作实例,需要的朋友可以参考下
    2015-01-01
  • JavaScript的漂亮的代码片段

    JavaScript的漂亮的代码片段

    记录我看到之后，不得不赞的代码片段。本贴板内容将不断更新，欢迎关注
    2013-06-06
  • js调用屏幕宽度的简单方法

    js调用屏幕宽度的简单方法

    下面小编就为大家带来一篇js调用屏幕宽度的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • js中indexof的用法详细解析

    js中indexof的用法详细解析

    本篇文章主要是对js中indexof的用法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-12-12
  • 微信小程序网络请求模块封装的具体实现

    微信小程序网络请求模块封装的具体实现

    大家做小程序项目的时候肯定会遇到数据对接需求,下面这篇文章主要给大家介绍了关于微信小程序网络请求模块封装的具体实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-03-03
  • JavaScript最少知识原则介绍与体现

    JavaScript最少知识原则介绍与体现

    最少知识原则（LKP）说的是一个软件实体应当尽可能少地与其他实体发生相互作用。这里的软件实体是一个广义的概念，不仅包括对象，还包括系统、类、模块、函数、变量等
    2022-08-08
  • javascript实现的时间格式加8小时功能示例

    javascript实现的时间格式加8小时功能示例

    这篇文章主要介绍了javascript实现的时间格式加8小时功能,涉及javascript日期时间转换与运算相关操作技巧,需要的朋友可以参考下
    2019-06-06
  • JavaScript中获得CheckBox状态的方法小结

    JavaScript中获得CheckBox状态的方法小结

    在 JavaScript 中,获取复选框（CheckBox）的状态（选中或未选中）可以通过以下几种方式实现,以下是具体方法及示例,并通过代码示例介绍的非常详细,需要的朋友可以参考下
    2025-03-03
  • JavaScript实现查找字符串中第一个不重复的字符

    JavaScript实现查找字符串中第一个不重复的字符

    这篇文章主要介绍了JavaScript实现查找字符串中第一个不重复的字符,需要的朋友可以参考下
    2014-12-12

最新评论