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

WBOY
Release: 2016-05-16 16:03:04
Original
1470 people have browsed it

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

使用方法:

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

实现代码:

//颜色转换 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); } });
Copy after login

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

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!