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 相关文章推荐
js中array的sort()方法使用介绍
Feb 20 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
jquery实现简单实用的弹出层效果代码
Oct 15 Javascript
JS触发服务器控件的单击事件(详解)
Aug 06 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
react中fetch之cors跨域请求的实现方法
Mar 14 Javascript
快速解决brew安装特定版本flow的问题
May 17 Javascript
javascript实现简易聊天室
Jul 12 Javascript
JavaScript中数组去重的5种方法
Jul 04 Javascript
一文彻底理解js原生语法prototype,__proto__和constructor
Oct 24 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查询搜索引擎排名位置的代码
2010/01/05 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
PHP如何将图片文件上传到另外一台服务器上
2019/08/26 PHP
在线编辑器的实现原理(兼容IE和FireFox)
2007/03/09 Javascript
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
2010/06/30 Javascript
javascript中检测变量的类型的代码
2010/12/28 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
JavaScript高级程序设计(第3版)学习笔记8 js函数(中)
2012/10/11 Javascript
javascript中onclick(this)用法介绍
2013/04/19 Javascript
实例讲解JavaScript中instanceof运算符的用法
2016/06/08 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
详解vue前后台数据交互vue-resource文档
2017/07/19 Javascript
详解如何在react中搭建d3力导向图
2018/01/12 Javascript
详解vue更改头像功能实现
2019/04/28 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
[00:32]2018DOTA2亚洲邀请赛Secret出场
2018/04/03 DOTA
[02:07]TI9显影之尘系列 - Vici Gaming
2019/08/20 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python变量和字符串详解
2017/04/29 Python
python如何实现int函数的方法示例
2018/02/19 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
感恩教师节演讲稿
2014/09/03 职场文书
党的群众路线领导班子整改方案
2014/09/27 职场文书
2014年派出所工作总结
2014/11/21 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
56句经典英文座右铭
2019/08/09 职场文书
如何有效防止sql注入的方法
2021/05/25 SQL Server
python神经网络 使用Keras构建RNN训练
2022/05/04 Python