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


Posted in Javascript onFebruary 28, 2015

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

Javascript 相关文章推荐
JS异常处理的一个想法(sofish)
Mar 14 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 Javascript
js格式化时间和js格式化时间戳示例
Feb 10 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
浅谈JavaScript中null和undefined
Jul 09 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
JS+CSS实现实用的单击输入框弹出选择框的方法
Feb 28 #Javascript
JS实现很酷的EMAIL地址添加功能实例
Feb 28 #Javascript
浅谈JavaScript数据类型及转换
Feb 28 #Javascript
javaScript基础语法介绍
Feb 28 #Javascript
jQuery实现的输入框选择时间插件用法实例
Feb 28 #Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 #Javascript
JavaScript生成随机数的4种自定义函数分享
Feb 28 #Javascript
You might like
全国FM电台频率大全 - 25 云南省
2020/03/11 无线电
一个简单的域名注册情况查询程序
2006/10/09 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
laradock环境docker-compose操作详解
2019/07/29 PHP
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
在JavaScript中处理字符串之link()方法的使用
2015/06/08 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
5种JavaScript脚本加载的方式
2017/01/16 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
2017/03/02 Javascript
Angularjs中使用指令绑定点击事件的方法
2017/03/30 Javascript
微信小程序的日期选择器的实例详解
2017/09/29 Javascript
vue组件父子间通信详解(三)
2017/11/07 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
vue分页插件的使用方法
2019/12/25 Javascript
jQuery实现购物车全功能
2021/01/11 jQuery
Python实现比较两个文件夹中代码变化的方法
2015/07/10 Python
Python基于贪心算法解决背包问题示例
2017/11/27 Python
Python随机函数random()使用方法小结
2018/04/29 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python + selenium 刷B站播放量的实例代码
2020/06/12 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
英国最大的正宗复古足球衫制造商和零售商:TOFFS
2018/06/21 全球购物
有原因的手表:Flex Watches
2019/03/23 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
配件采购员岗位职责
2013/12/03 职场文书
初中校园之声广播稿
2014/01/15 职场文书
人事专员岗位职责范本
2014/03/04 职场文书
林肯就职演讲稿
2014/05/19 职场文书
学校工会工作总结2015
2015/05/19 职场文书
餐厅服务员管理制度
2015/08/05 职场文书
2016毕业实习单位评语大全
2015/12/01 职场文书
话题作文之关于呼唤
2019/11/29 职场文书