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代码
Nov 12 Javascript
javascript计算用户打开网页的停留时间
Jan 09 Javascript
JQuery显示隐藏页面元素的方法总结
Apr 16 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
原生javascript实现分页效果
Apr 21 Javascript
微信小程序中hidden不生效原因的解决办法
Apr 26 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
Nov 02 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
小程序自定义弹框效果
Nov 16 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 is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
实战mysql导出中文乱码及phpmyadmin导入中文乱码的解决方法
2010/06/11 PHP
php的memcached客户端memcached
2011/06/14 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
Symfony2 session用法实例分析
2016/02/04 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
PHP实现一个限制实例化次数的类示例
2019/09/16 PHP
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
JavaScript中的prototype.bind()方法介绍
2014/04/04 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
Javascript 拖拽雏形(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
JS组件系列之Bootstrap Icon图标选择组件
2016/01/28 Javascript
Javascript农历与公历相互转换的简单实例
2016/10/09 Javascript
JS实现搜索关键词的智能提示功能
2017/07/07 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
五分钟搞懂Vuex实用知识(小结)
2019/08/12 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
2019/12/13 Javascript
解决微信授权成功后点击按返回键出现空白页和报错的问题
2020/06/08 Javascript
python存储16bit和32bit图像的实例
2018/12/05 Python
CSS3 text shadow字体阴影效果
2016/01/08 HTML / CSS
英国家庭家具、照明和花园家具购物网站:Furniture123
2018/12/31 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
加拿大拼图大师:Puzzle Master
2020/12/28 全球购物
出国考察邀请函
2014/01/21 职场文书
建材投资建议书
2014/05/16 职场文书
大学毕业生推荐信
2014/07/09 职场文书
民事诉讼授权委托书范文
2014/08/02 职场文书
机关作风整顿个人整改措施2014
2014/09/17 职场文书
面试自我评价范文
2014/09/17 职场文书
教你如何使用Python下载B站视频的详细教程
2021/04/29 Python
Redis字典实现、Hash键冲突及渐进式rehash详解
2021/09/04 Redis
全新239军机修复记
2022/04/05 无线电