从网上看了个案例，是实现颜色值转换的，就想着自己也写个。网上的案例链接找不到了，这里也就不贴了。

JavaScript颜色转换的核心就是进制间的转换。

rgba(0,0,0,.4)转换成#000000，就是Number.toString(16)

#ffffff转换成rgb(255,255,255)，就是parseInt(String,16)

代码如下：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">

<title>JS-颜色值的转换</title>

<meta name="author" content="rainna" />

<meta name="keywords" content="rainna's js lib" />

<meta name="description" content="js" />

<style>

*{margin:0;padding:0;}

body{background:#f0f0f0;}

h2{margin:0 0 20px;}

input{width:300px;height:24px;line-height:24px;}

.m-box{width:900px;margin:0 auto;padding:20px;}

</style>

</head>

<body>

<div class="m-box">

    <h2>RGB(A)颜色转换为HEX十六进制的颜色值</h2>

    <div class="box1">

        <input type="text" id="colorIpt1" value="rgba(0,0,0,.4)"/>

        <a href="#" id="link1">转换</a>

        <input type="text" id="colorIpt2"/>

    </div>

</div>

<div class="m-box">

    <div class="box1">

        <input type="text" id="colorIpt3" value="#ffffff"/>

        <a href="#" id="link2">转换</a>

        <input type="text" id="colorIpt4"/>

    </div>

</div>

<script>

var colorChange = {

    rgbToHex:function(val){  //RGB(A)颜色转换为HEX十六进制的颜色值

        var r, g, b, a,

        regRgba = /rgba?\((\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?\)/,    //判断rgb颜色值格式的正则表达式，如rgba(255,20,10,.54)

        rsa = val.replace(/\s+/g,'').match(regRgba);

        if(!!rsa){

            r = parseInt(rsa[1]).toString(16);

            r = r.length == 1 ? '0' + r : r;

            g = (+rsa[2]).toString(16);

            g = g.length == 1 ? '0' + g : g;

            b = (+rsa[3]).toString(16);

            b = b.length == 1 ? '0' + b : b;

            a = (+(rsa[5] ? rsa[5] : 1)) * 100;

            return {hex:'#' + r + g + b, alpha: Math.ceil(a)};

        }else{

            return {hex:val, alpha:100};

        }

    },

    hexToRgb:function(val){   //HEX十六进制颜色值转换为RGB(A)颜色值

        var a,b,c;

        if((/^#/g).test(val)){

            a = val.slice(1,3);

            b = val.slice(3,5);

            c = val.slice(5,7);

            return {rgba:'rgb(' + parseInt(a,16) + ',' + parseInt(b,16) + ',' + parseInt(c,16) + ')'};

        }else{

            return {rgba:'无效值：' + val};

        }

    }

};

link1.onclick = function(){

    var obj = colorChange.rgbToHex(document.getElementById('colorIpt1').value);

    document.getElementById('colorIpt2').value = '颜色值：' + obj.hex + '，透明度：' + obj.alpha + '%';

};

link2.onclick = function(){

    var obj = colorChange.hexToRgb(document.getElementById('colorIpt3').value);

    document.getElementById('colorIpt4').value = '颜色值：' + obj.rgba;

};

</script>

</body>

</html>

JS实现颜色值的转换的更多相关文章

  1. JSON字符串和JS对象之间的转换

    JSON字符串和JS对象之间的转换 1 json字符串转换为js对象 1.1 标准json格式字符串转换为Js对象  JSON字符串 str JSON.parse(str) eval(str) eva ...

  2. js 的强制 类型 转换cast, 伪对象?

    拼音输入法简单快捷, 但是重码多, 所以要看清了再选择, 不然会影响输入正确性和 心情的! js的类型 隐式 转换? 是指, 根据 表达式的操作符号 如if(), + , && , j ...

  3. js如何把字符串转换成json数据的方法

    js如何把字符串转换成json数据的方法 function strtojson(str){ var json = eval('(' + str + ')'); return json; } 方法二 f ...

  4. js中的时间转换—毫秒转换成日期时间

    转自:http://www.javascript100.com/?p=181 前几天,在项目中遇到js时间增加问题,要将js毫秒时间转换成日期时间 var oldTime = (new Date(&q ...

  5. JS将/Date(1446704778000)/转换成str

    JS将/Date(1446704778000)/转换成str:var dateStr = eval(ele.add_time.replace(/\/Date\((\d+)\)\//gi, " ...

  6. 小tips：JS数值之间的转换，JS中最大的Number是多少？，JS == 与 === 的区别

    JS数值之间的转换 Number(), parseInt(),parseFloat() Number()函数的转换规则如下: 1.如果boolean值,true和false将分别被转换为1和02.如果 ...

  7. js数据类型隐式转换问题

    js数据类型隐式转换 ![] == false //true 空数组和基本类型转换,会先[].toString() 再继续比较 ![] == [] //true ![] //false [] == [ ...

  8. JS中应用正则表达式转换大小写

    JS中应用正则表达式转换大小写,代码很简单,看代码: 以下首字母大写,其它字母小写 <script type="text/javascript"> function r ...

  9. JQuery学习：jquery对象和js对象区别和转换

    JQuery对象与JS对象区别与转换 1.JQuery对象在操作时,更加方便 2.JQuery对象和js对象方法不通用 3.两者相互转换 *  jq -- > js:jq对象[索引]  或者  ...

随机推荐

  1. 关于JAVA中的static方法、并发问题以及JAVA运行时内存模型

    一.前言 最近在工作上用到了一个静态方法,跟同事交流的时候,被一个问题给问倒了,只怪基础不扎实... 问题大致是这样的,“在多线程环境下,静态方法中的局部变量会不会被其它线程给污染掉?”: 我当时的想 ...

  2. 用nginx-gridFS读取MongoDB的图片及文件（为什么你老是配不成功？）

    最近在部署公司服务器的nginx + mongodb + gridfs环境: 搜索了N多文档,基本上都一样,期间遇到很多问题: 下面是整理的一份搭建文档: 摘要 nginx-gridfs是一个ngin ...

  3. Orchard扩展 自定义后台管理导航菜单 Admin Menu

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉. 金天:看源码永远是Coder学习的最快捷路径.     看本文需要对Orchard大致体系, 特别是Mo ...

  4. 【mysql】索引的优化

    写在前面的话 查询容易,优化不易,且写且珍惜 mysql结构 从MySQL逻辑架构来看,MySQL有三层架构,第一层连接,第二层查询解析.分析.优化.视图.缓存,第三层,存储引擎 MySQL有哪些索引 ...

  5. 「ubuntu」通过无线网络安装Ubuntu Server，启动系统后如何连接无线网络

    接触Ubuntu系统不久,发现无线网络环境下安装Ubuntu Server一个不太人性化的设计:在安装过程中选择无线网卡,即使用无线网络安装(此时需要选择Wi-Fi网络并输入密码),但系统安装完成重启 ...

  6. Python2

    安装pycharm专业版,不要汉化 要想写的代码支持linux和2.0版本需要在开头加上注释 #/usr/bin/env python #-*- coding:utf-8 -*- 运算符 结果是值 算 ...

  7. mysql大小写问题

    以前做企业项目的时候,用的都是oracle数据库,在新公司项目用的是mysql,有关mysql大小写的问题 1   windows下默认mysql是不区分大小写的,要想让其支持大小写.更改方法 在my ...

  8. [实践] ubuntu下编译安装ambari

    ambari是一个Hadoop套件的管理工具,可以方便部署.管理及监控.最初开发时使用的就是RH系的Linux,只支持RHEL.CentOS5/6.OEL.SLES,暂不支持Ubuntu:可我的需求就 ...

  9. Swift学习笔记--变量与常量

    1.Swift是一门强类型语言,不能为变量赋予其自身数据类型之外的值: 2.声明变量使用var关键字,声明常量使用let关键字: 3.声明变量或常量时没有对其指定类型且赋予了初值,则编译器会自动推断常 ...

  10. 内存流和null字节

    #include <stdio.h> #include <string.h> int main() { ]={}; FILE* fp = fmemopen(buf,," ...