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滚动条多种样式,推荐
Feb 05 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 Javascript
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
js统计页面的来访次数实现代码
May 09 Javascript
jquery实现简单的全选和反选功能
Jan 02 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
javascript实现复选框全选或反选
Feb 04 Javascript
video.js使用改变ui过程
Mar 05 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
浅谈vue限制文本框输入数字的正确姿势
Sep 02 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
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP编程快速实现数组去重的方法详解
2017/07/22 PHP
php实现websocket实时消息推送
2018/03/30 PHP
基于jquery的checkbox下拉框插件代码
2010/06/25 Javascript
JavaScript isArray()函数判断对象类型的种种方法
2010/10/11 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
java、javascript实现附件下载示例
2014/08/14 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
VUE实现日历组件功能
2017/03/13 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
探秘vue-rx 2.0(推荐)
2018/09/21 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
2019/08/02 Javascript
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
vue实现信息管理系统
2020/05/30 Javascript
python字典序问题实例
2014/09/26 Python
理解Python中的With语句
2016/03/18 Python
python读取文件名称生成list的方法
2018/04/27 Python
python利用插值法对折线进行平滑曲线处理
2018/12/25 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
Python selenium爬虫实现定时任务过程解析
2020/06/08 Python
世界上最大的糖果店:Dylan’s Candy Bar
2017/11/07 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
年级组长自我鉴定
2014/02/22 职场文书
银行职员自我鉴定
2014/04/20 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
扶贫办主任查摆“四风”问题个人对照检查材料思想汇报
2014/10/02 职场文书
会计电算化实训报告
2014/11/04 职场文书
2015感人爱情寄语
2015/02/26 职场文书
简历中自我评价范文
2015/03/11 职场文书
营运督导岗位职责
2015/04/10 职场文书
公司与个人合作协议书
2016/03/19 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
Python pandas之求和运算和非空值个数统计
2021/08/07 Python
如何基于python实现单目三维重建详解
2022/06/25 Python