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 相关文章推荐
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
$.get获取一个文件的内容示例代码
Sep 11 Javascript
js结合正则实现国内手机号段校验
Jun 19 Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 Javascript
原生js仿淘宝网商品放大镜效果
Feb 28 Javascript
使用selenium抓取淘宝的商品信息实例
Feb 06 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
五句话帮你轻松搞定js原型链
Dec 09 Javascript
vue keep-alive的简单总结
Jan 25 Vue.js
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
PHP 函数语法介绍一
2009/06/14 PHP
php 短链接算法收集与分析
2011/12/30 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP超牛逼无限极分类生成树方法
2015/05/11 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
使用PHPExcel实现数据批量导出为excel表格的方法(必看)
2017/06/09 PHP
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
js取得url地址参数实例
2013/02/22 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
2017/09/26 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
推荐几个不错的console调试技巧实现
2019/12/20 Javascript
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
微信小程序纯文本实现@功能
2020/04/08 Javascript
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
Python 自动刷博客浏览量实例代码
2017/06/14 Python
详解Python 函数如何重载?
2019/04/23 Python
python global和nonlocal用法解析
2020/02/03 Python
Python threading.local代码实例及原理解析
2020/03/16 Python
python 爬虫之selenium可视化爬虫的实现
2020/12/04 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
美国第二大连锁书店:Books-A-Million
2017/12/28 全球购物
Hotels.com越南:酒店预订
2019/10/29 全球购物
开朗女孩的自我评价
2014/02/10 职场文书
婚礼答谢词范文
2015/09/29 职场文书
课改心得体会范文
2016/01/25 职场文书
工作总结之小学教师体育工作范文(3篇)
2019/10/07 职场文书
golang中切片copy复制和等号复制的区别介绍
2021/04/27 Golang
python基于turtle绘制几何图形
2021/06/15 Python
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js