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 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JavaScript使用原型和原型链实现对象继承的方法详解
Apr 05 Javascript
微信小程序swiper实现滑动放大缩小效果
Nov 15 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
Aug 11 Javascript
vue 中的动态传参和query传参操作
Nov 09 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 Javascript
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
Javascript调试工具(下载)
2007/01/09 Javascript
Javascript中的数学函数
2007/04/04 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jQuery之ajax技术的详细介绍
2013/06/19 Javascript
Js注册协议倒计时的小例子
2013/06/24 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
js+jquery实现图片裁剪功能
2015/01/02 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
JS排序方法(sort,bubble,select,insert)代码汇总
2016/01/30 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
python多重继承实例
2014/10/11 Python
Python中http请求方法库汇总
2016/01/06 Python
python ctypes库2_指定参数类型和返回类型详解
2019/11/19 Python
分享一个python的aes加密代码
2020/12/22 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
Blue Nile中国官网:全球知名的钻石和珠宝网络零售商
2020/03/22 全球购物
什么是JNDI的上下文?如何初始化JNDI上下文
2012/03/10 面试题
中专自我鉴定
2014/02/05 职场文书
采购部部长岗位职责
2014/02/06 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
节水口号标语
2014/06/19 职场文书
过程装备与控制工程专业求职信
2014/07/02 职场文书
经营目标管理责任书
2014/07/25 职场文书
《女娲补天》读后感5篇
2019/12/31 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python
Javascript设计模式之原型模式详细
2021/10/05 Javascript
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL