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下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
CSS(js)限制页面显示的文本字符长度
Dec 27 Javascript
基于javascript实现窗口抖动效果
Jan 03 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
vue实现2048小游戏功能思路详解
May 09 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 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
PHP $_FILES中error返回值详解
2014/01/30 PHP
php简单smarty入门程序实例
2015/06/11 PHP
php生成静态html页面的方法(2种方法)
2015/09/14 PHP
百万级别知乎用户数据抓取与分析之PHP开发
2015/09/28 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
jquery插件之文字间歇自动向上滚动效果代码
2016/02/25 Javascript
常用的js验证和数据处理总结
2016/08/02 Javascript
解析如何利用iframe标签以及js制作时钟
2016/12/08 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
vue中使用elementUI组件手动上传图片功能
2019/12/13 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
[00:58]2016年国际邀请赛勇士令状宣传片
2016/06/01 DOTA
[03:03]DOTA2 2017国际邀请赛开幕战队入场仪式
2017/08/09 DOTA
[26:50]2018完美盛典DOTA2表演赛
2018/12/17 DOTA
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
利用Pandas读取文件路径或文件名称包含中文的csv文件方法
2018/07/04 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
HTML5+CSS3 实现灵动的动画 TAB 切换效果(DEMO)
2017/09/15 HTML / CSS
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
网络教育毕业生自我鉴定
2013/10/10 职场文书
《称象》教学反思
2014/04/25 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
学生会个人总结范文
2015/02/15 职场文书
聚众斗殴罪辩护词
2015/05/21 职场文书
安娜卡列尼娜观后感
2015/06/11 职场文书
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js