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 16 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
简介JavaScript中Math.LOG10E属性的使用
Jun 14 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 Javascript
微信小程序 出现47001 data format error原因解决办法
Mar 10 Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
基于Vue2实现简易的省市区县三级联动组件效果
Nov 05 Javascript
关于element-ui表单中限制输入纯数字的解决方式
Sep 08 Javascript
解决vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题
Sep 11 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自动适应范围的分页代码
2008/08/05 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
阿里云的WindowsServer2016上部署php+apache
2018/07/17 PHP
JavaScript 直接操作本地文件的实现代码
2009/12/01 Javascript
jquery1.4 教程二 ajax方法的改进
2010/02/25 Javascript
javascript弹出层输入框(示例代码)
2013/12/11 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
基于javascript实现彩票随机数生成(简单版)
2020/04/17 Javascript
JS中的进制转换以及作用
2016/06/26 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
ionic环境配置及问题详解
2017/06/27 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
360doc网站不登录就无法复制内容的解决方法
2018/01/27 Javascript
使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)
2018/05/01 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python 拷贝特定后缀名文件,并保留原始目录结构的实例
2018/04/27 Python
Python提取频域特征知识点浅析
2019/03/04 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Python中Subprocess的不同函数解析
2019/12/10 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
python生成并处理uuid的实现方式
2020/03/03 Python
django model的update时auto_now不被更新的原因及解决方式
2020/04/01 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
教师党员承诺书
2014/03/25 职场文书
中国梦党课学习心得体会
2016/01/05 职场文书
端午节将至,用Python爬取粽子数据并可视化,看看网友喜欢哪种粽子吧!
2021/06/11 Python
Python+Matplotlib+LaTeX玩转数学公式
2022/02/24 Python
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技