javascript实现根据3原色制作颜色选择器的方法


Posted in Javascript onJuly 17, 2015

本文实例讲述了javascript实现根据3原色制作颜色选择器的方法。分享给大家供大家参考。具体如下:

document.write('<div id="msecolor"><div class="aa"><div class="ab"><div class="ab1"><select onchange="T.f(this.value)"><option value="1">红</option><option value="3">绿</option><option value="5">蓝</option><option value="7">灰</option></select></div><div id="msecolor_ab2"><input type="text" maxlength="7"><span></span></div></div><div class="ac"><div id="msecolor_ac1"></div><div id="msecolor_ac2"></div></div></div></div>');
T={s:true};
T.a=A.$('msecolor_ab2').children[0];
T.b=A.$('msecolor_ab2').children[1];
T.c=A.$('msecolor_ac1');
T.d=A.$('msecolor_ac2');
T.ini=function(id,fun){
 this.fun=fun;
 if(typeof(id)!='object')
 id=A.$(id);
 this.obj=id;
 var w=A.wz(id);
 var ph=document.documentElement.clientHeight,pw=document.documentElement.clientWidth;
 var sh=document.documentElement.scrollTop,sw=document.documentElement.scrollLeft;
 if(w.x-sw+322 > pw){
  var l=w.x+id.offsetWidth - 322;
 }else{
  var l=w.x;
 }
 if(w.y-sh+329+id.offsetHeight > ph){
  var t=w.y - 329;
 }else{
  var t=w.y+id.offsetHeight;
 }
 with(A.$('msecolor').style){
  display='block';
  top=t+'px';
  left=l+'px';
 }
}
T.hide=function(){A.$('msecolor').style.display='none';}
T.e=['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
T.f=function(a){
 T.h=a;
 T.c.innerHTML='';
 if(a==7){
  for(var i=0;i<16;i++){
  var s=A.$$('span');
  s.title=s.style.backgroundColor='#'+T.e[i]+T.e[i]+T.e[i]+T.e[i]+T.e[i]+T.e[i];
  T.c.appendChild(s);
  }
  T.g(a,0);
 }else{
 for(var i=0;i<16;i++){
 var s=A.$$('span');
 s.title=s.style.backgroundColor=T.z(a,T.e[i]);
 T.c.appendChild(s);
 s.onclick=function(){
  var s=this.title.substr(1,1);
  if(s=='0')
  s=this.title.substr(3,1);
  if(s=='0')
  s=this.title.substr(5,1);
  T.g(T.h,s);
  }
 }
 T.g(a,0);
 }
}
T.g=function(a,b){
 T.d.innerHTML='';
 switch(parseInt(a)){
  case 1:
  var c=3,e=5,g='T.z(a,b,c,T.e[parseInt(i/16)],e,T.e[i%16])';
  break;
  case 3:
  var c=1,e=5,g='T.z(c,T.e[parseInt(i/16)],a,b,e,T.e[i%16])';
  break;
  case 5:
  var c=1,e=3,g='T.z(c,T.e[parseInt(i/16)],e,T.e[i%16],a,b)';
  break;
  case 7:
  for(var i=0;i<256;i++){
   var s=document.createElement('span');
   s.title=s.style.backgroundColor='#'+T.e[parseInt(i/16)]+T.e[i%16]+T.e[parseInt(i/16)]+T.e[i%16]+T.e[parseInt(i/16)]+T.e[i%16];
   s.onmouseover=function(){
    T.a.value=this.title;
    T.b.style.backgroundColor=this.style.backgroundColor;
    T.b.title=this.title;
   }
   s.onclick=function(){
    T.hide();
    T.fun(this.title,T.obj);
   }
   T.d.appendChild(s);
  }
  return false;
  break;
 }
 for(var i=0;i<256;i++){
 var s=document.createElement('span');
 s.title=s.style.backgroundColor=eval(g);
 s.onmouseover=function(){
  T.b.style.backgroundColor=this.style.backgroundColor;
  T.a.value=this.title;
  T.b.title=this.title;
 }
 s.onclick=function(){
  T.hide();
  T.fun(this.title,T.obj);
 }
 T.d.appendChild(s);
 }
}
T.b.onclick=function(){
 T.hide();
 T.fun(this.title,T.obj);
}
T.a.onkeyup=function(e){
 var e=e || event;
 if(e.keyCode==13){
  T.b.style.backgroundColor=this.value;
  T.b.title=this.value;
  T.hide();
  T.fun(this.value,T.obj);
 }
}
T.z=function(a,b,c,d,e,f){s='#';a=parseInt(a);c=parseInt(c);e=parseInt(e);for(var i=0;i<6;i++){if(i>=(a-1) && i<(a+1)){s+=b;}else if(i>=(c-1) && i<(c+1)){s+=d;}else if(i>=(e-1) && i<(e+1)){s+=f;}else{s+='0';}}return s;}
T.f(1);

运行效果图如下:

javascript实现根据3原色制作颜色选择器的方法

javascript实现根据3原色制作颜色选择器的方法

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

Javascript 相关文章推荐
Javascript typeof 用法
Dec 28 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
Feb 16 Javascript
js跨浏览器实现将字符串转化为xml对象的方法
Sep 25 Javascript
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
js中时间格式化的几种方法
Jul 22 Javascript
javascript实现的时间格式加8小时功能示例
Jun 13 Javascript
layui 实现table翻页滚动条位置保持不变的例子
Sep 05 Javascript
JavaScript实现简单贪吃蛇效果
Mar 09 Javascript
js实现前端界面导航栏下拉列表
Aug 27 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
javascript实现树形菜单的方法
Jul 17 #Javascript
JSON与XML优缺点对比分析
Jul 17 #Javascript
浅谈jQuery的offset()方法及示例分享
Jul 17 #Javascript
JavaScript用select实现日期控件
Jul 17 #Javascript
纯javascript制作日历控件
Jul 17 #Javascript
javascript生成不重复的随机数
Jul 17 #Javascript
jQuery实现径向动画菜单效果
Jul 17 #Javascript
You might like
php array_flip() 删除数组重复元素
2009/01/14 PHP
PHP跨时区(UTC时间)应用解决方案
2013/01/11 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
JS的document.all函数使用示例
2013/12/30 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
js面向对象的写法
2016/02/19 Javascript
jQuery插件 Jqplot图表实例
2016/06/18 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
AngularJS实现单一页面内设置跳转路由的方法
2017/06/28 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
用Node提供静态文件服务的方法
2018/07/06 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
微信小程序按顺序同步执行的两种方式
2019/12/20 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
利用Psyco提升Python运行速度
2014/12/24 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
TensorFlow打印tensor值的实现方法
2018/07/27 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
StubHub巴西:购买和出售您的门票
2016/07/22 全球购物
领导班子对照检查材料
2014/09/22 职场文书
营业用房租赁协议书
2014/11/26 职场文书
同学聚会感言一句话
2015/07/30 职场文书
几款流行的HTML5 UI框架比较(小结)
2021/04/08 HTML / CSS
redis内存空间效率问题的深入探究
2021/05/17 Redis
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL
Spring Cloud OpenFeign模版化客户端
2022/06/25 Java/Android