Javascript实现颜色rgb与16进制转换的方法


Posted in Javascript onApril 18, 2015

本文实例讲述了Javascript实现颜色rgb与16进制转换的方法。分享给大家供大家参考。具体如下:

使用方法:

Color(12,34,56);
Color("#fff")
Color("#defdcd")

实现代码:

//颜色转换
var Color = function() {
  if (!(this instanceof Color)) {
   var color = new Color();
   color._init.apply(color, arguments);
   return color;
  }
  if (arguments.length) {
   this._init.apply(this, arguments);
  }
}
//设置get,set方法
var methods = ["red", "green", "blue", "colorValue"];
var defineSetGetMethod = function(fn, methods) {
  var fnPrototype = fn.prototype;
  for (var i = 0; i < methods.length; i++) {
   var methodName = methods[i].charAt(0).toLocaleUpperCase() + methods[i].substring(1);
   fn.prototype['set' + methodName] = new Function("value", "this." + methods[i] + "= value;");
   fn.prototype['get' + methodName] = new Function("return this." + methods[i] + ";");
   fn.prototype['toString'] = new Function('return "rgb("+this.red+","+this.green+","+this.blue+")";');
  }
};
defineSetGetMethod(Color, methods);
//扩展函数的实例方法
var extend = function(fn, option) {
  var fnPrototype = fn.prototype;
  for (var i in option) {
   fnPrototype[i] = option[i];
  }
};
extend(Color, {
  _init : function() {
   if (arguments.length == 3) {
    this.red = arguments[0];
    this.green = arguments[1];
    this.blue = arguments[2];
    this.getColorValue();
   } else {
    var colorValue = arguments[0].replace(/^\#{1}/, "");
    if (colorValue.length == 3) {
     colorValue = colorValue.replace(/(.)/g, '$1$1');
    }
    this.red = parseInt('0x' + colorValue.substring(0, 2), 16);
    this.green = parseInt('0x' + colorValue.substring(2, 4), 16);
    this.blue = parseInt('0x' + colorValue.substring(4), 16);
    this.colorValue = "#" + colorValue;
   }
  },
  getColorValue : function() {
   if (this.colorValue) {
    return this.colorValue;
   }
   var hR = this.red.toString(16);
   var hG = this.green.toString(16);
   var hB = this.blue.toString(16);
   return this.colorValue = "#" + (this.red < 16 ? ("0" + hR) : hR) + (this.green < 16 ? ("0" + hG) : hG) + (this.blue < 16 ? ("0" + hB) : hB);
  }
});

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

Javascript 相关文章推荐
javascript indexOf函数使用说明
Jul 03 Javascript
javascript void(0)的妙用
Oct 21 Javascript
jquery实现的可隐藏重现的靠边悬浮层实例代码
May 27 Javascript
node.js中的http.createServer方法使用说明
Dec 14 Javascript
百度地图给map添加右键菜单(判断是否为marker)
Mar 04 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
jquery中用jsonp实现搜索框功能
Oct 18 Javascript
Vuex之理解Store的用法
Apr 19 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
React 组件间的通信示例
Jun 14 Javascript
js实现列表向上无限滚动
Jan 13 Javascript
JQuery绑定事件四种实现方法解析
Dec 02 jQuery
JS解析XML文件和XML字符串详解
Apr 17 #Javascript
JS设置cookie、读取cookie、删除cookie
Apr 17 #Javascript
js获取当前日期时间及其它操作汇总
Apr 17 #Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 #Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 #Javascript
JS获取图片高度宽度的方法分享
Apr 17 #Javascript
JS替换字符串中空格方法
Apr 17 #Javascript
You might like
深入了解php4(1)--回到未来
2006/10/09 PHP
php网站判断用户是否是手机访问的方法
2013/11/01 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
php图片添加文字水印实现代码
2016/03/15 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
Yii2框架实现注册和登录教程
2016/09/30 PHP
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
jQuery实现拖动调整表格单元格大小的代码实例
2015/01/13 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
node+experss实现爬取电影天堂爬虫
2016/11/20 Javascript
Vue2.0组件间数据传递示例
2017/03/07 Javascript
详解适配器在JavaScript中的体现
2018/09/28 Javascript
微信小程序实现滑动操作代码
2020/04/23 Javascript
js实现弹窗效果
2020/08/09 Javascript
[02:42]完美大师赛主赛事淘汰赛第三日观众采访
2017/11/25 DOTA
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
Python脚本获取操作系统版本信息
2016/12/17 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python实现决策树C4.5算法的示例
2018/05/30 Python
python视频按帧截取图片工具
2019/07/23 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
利用 Python ElementTree 生成 xml的实例
2020/03/06 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
解决jupyter notebook 出现In[*]的问题
2020/04/13 Python
Yahoo-PHP面试题1
2016/07/20 面试题
EJB2和EJB3在架构上的不同点
2014/09/29 面试题
J2ee常用的设计模式?说明工厂模式
2015/05/21 面试题
幼儿园教师考核制度
2014/02/01 职场文书
松材线虫病防治方案
2014/06/15 职场文书
普通党员对照检查材料
2014/09/24 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
Python语言中的数据类型-序列
2022/02/24 Python