JavaScript实现16进制颜色值转RGB的方法

本文实例讲述了JavaScript实现16进制颜色值转RGB的方法。分享给大家供大家参考。具体实现方法如下：

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>16进制颜色值转RGB</title>
        <style>
        *{margin:0;padding:0;font-family:'Microsoft yahei'}
        .replace{width:400px;height:210px;margin:0 auto;padding-top:40px;}
        .title{text-align:center;display:block}
          form{width:200px;margin:30px auto;}
          input{outline:none;}
          input[type="button"]{cursor:pointer;}
        </style>
        <script>
        function hexToR(h) {
            return parseInt((cutHex(h)).substring(0, 2), 16)
        }
        function hexToG(h) {
            return parseInt((cutHex(h)).substring(2, 4), 16)
        }
        function hexToB(h) {
            return parseInt((cutHex(h)).substring(4, 6), 16)
        }
        function cutHex(h) {
            return h.charAt(0) == "#" ? h.substring(1, 7) : h
        }
        function setBgColorById(id, sColor) {
            var elems;
            if (document.getElementById) {
                if (elems = document.getElementById(id)) {
                    if (elems.style) elems.style.backgroundColor = sColor;
                }
            }
         }
        </script>
        </head>
        <body>
            <div class="replace">
                <span class="title">JavaScript原生16进制颜色值转RGB值</span>
                 <form name="rgb">
                     <input value="ffffff" maxlength="7" size="16" name="hex" />
               <input onclick="setBgColorById('colorSample',this.form.hex.value);
               this.form.r.value=hexToR(this.form.hex.value);
               this.form.g.value=hexToG(this.form.hex.value);
               this.form.b.value=hexToB(this.form.hex.value);" value="转换" type="button" name="btn"/>
               <br /><br />
                   R:<input style="width:30px" size="3" name="r" />
                G:<input style="width:30px" size="3" name="g" />
                B:<input style="width:30px" size="3" name="b" />
                 </form>               
            </div>
</body>
</html>

运行效果如下图所示：

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

赞 (0)

相关推荐

  • Javascript实现Web颜色值转换

    Javascript实现Web颜色值转换

    最近一直忙碌于完成业务需求,好长时间没有写博客了.今天稍微有些时间,翻看了一下最近项目中的一些前端代码,看到Web颜色转换功能的时候,突然想到当我们在做一些颜色设置/编辑的需求时,经常会涉及到各种颜色值格式的互换.于是我决定记录一下我在做这一部分功能的时候是如何实现的,写下来和大家分享一下,希望读者们各抒己见,多多交流. 先看看问题 问题一,当我们在进行网页前端开发的时候,经常会使用 dom.style.backgroundColor = "#f00" 来设置某个 DOM 元素的背景颜

  • 用javascript获取任意颜色的更亮或更暗颜色值示例代码

    前言 本文主要给大家介绍的是关于利用javascript获取任意颜色更亮或更暗颜色值的相关内容,下面话不多说,来一起看看详细的介绍: 预处理CSS,比如Sass和less可以通过设定一个特定值,让任何颜色变得更亮或者更暗.但是在javascript中却没有这种方法.下面这个方法能在javascript中得到一个更亮或者更暗的值,通过一个给定的十六进制颜色值(比如#F06D06,或者没有#) 示例代码 function LightenDarkenColor(col, amt) { var useP

  • 用js实现的十进制的颜色值转换成十六进制的代码

    function MyColor(name,r,g,b){ this.name=name; this.red=r; this.green=g; this.blue=b; } MyColor.prototype.hexValue=function(){ var hR=this.red.toString(16); var hG=this.green.toString(16); var hB=this.blue.toString(16); return "#"+(this.red [Ctrl

  • javascript实现十六进制颜色值（HEX）和RGB格式相互转换

    在日常开发中,经常会用到不同格式的颜色域值之间的相互转换,以下给出一种解决方法. 复制代码 代码如下: //十六进制颜色值的正则表达式 var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/; /*RGB颜色转换为16进制*/ String.prototype.colorHex = function(){     var that = this;     if(/^(rgb|RGB)/.test(that)){         var aColor = th

  • js获取随机颜色值的函数

    收集一个函数:获取随机颜色值 复制代码 代码如下: function getRandomColor(){ return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6); } 说明: 1.16777215为16进制的颜色ffffff转成10进制的数字 2.>>数字取整 3.转成16进制不足6位的以0来补充 在线演示代码: js随机颜色 document

  • js实现可得到不同颜色值的颜色选择器实例

    本文实例讲述了js实现可得到不同颜色值的颜色选择器.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>js颜色选择器,可得到不同的颜色值</title> </head> <body> <input id=kkk1 style=position:absolute;left:0;top:0> <input id=kkk2 style=position:absolut

  • RGB颜色值转HTML十六进制(HEX)代码的JS函数

    复制代码 代码如下: //转到固定长度的十六进制字符串,不够则补0 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } //妈的,怎么都没搜到怎么用javascript找出一个背景色的数值,只好自己解析 function rgb2hex(rgb) { //nnd, Firefox / IE not the

  • JavaScript实现16进制颜色值转RGB的方法

    JavaScript实现16进制颜色值转RGB的方法

    本文实例讲述了JavaScript实现16进制颜色值转RGB的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19

  • javascript将16进制的字符串转换为10进制整数hex

    16进制的字符串 转换为整数 function hex2int(hex) {     var len = hex.length, a = new Array(len), code;     for (var i = 0; i < len; i++) {         code = hex.charCodeAt(i);         if (48<=code && code < 58) {             code -= 48;         } else {

  • C# 16 进制字符串转 int的方法

    最近在写硬件,发现有一些测试是做 16 进制的字符串,需要把他转换为整形才可以处理. 本文告诉大家如何从 16 进制转整形. 如果输入的是 0xaa 这时转换 int 不能使用 Parse 不然会出现异常 System.FormatException 如果需要转换十六进制就需要使用 Convert 才可以转换 Convert.ToInt32("0xaa", 16) 使用这个方法才可以转换.实际使用这个方法转换不一定需要添加 0x ,直接使用 aa 也是可以 Convert.ToInt3

  • 对python以16进制打印字节数组的方法详解

    一.问题描述 如果直接用print打印bytes的话,有时候会直接显示ascii对应的字符,看起来很蛋疼. 二.运行效果 上面一行是直接用print打印的结果,很明显,第一个字节0x7b就被转换成'{'了. 三.代码 那么,如何输入上图中最后一行的格式呢,很简单: def print_hex(bytes): l = [hex(int(i)) for i in bytes] print(" ".join(l)) 以上这篇对python以16进制打印字节数组的方法详解就是小编分享给大家的全

  • Java中Color和16进制字符串互相转换的方法

    Java中Color和16进制字符串互相转换的方法

    1.原理 主要是调用了toHexString(将int类型转为16进制字符串).parseInt(将字符串解析为int)这两个方法. 2.代码 public static void main(String[] args) { String hexString = colorToHexValue(Color.RED); System.out.println("16进制字符串:" + hexString); Color color = fromStrToARGB(hexString); S

  • Android源码使用16进制进行状态管理的方法

    前言 在Android源码中,对于"多状态"的管理总是通过16进制数字来表示,类似这种格式: //ViewGroup.java protected int mGroupFlags; static final int FLAG_CLIP_CHILDREN = 0x1; private static final int FLAG_CLIP_TO_PADDING = 0x2; static final int FLAG_INVALIDATE_REQUIRED = 0x4; private s

  • JavaScript中的16进制字符介绍

    前段时间看<JavaScript高级程序设计>终于找到了一点点介绍: \xnn 以十六进制代码nn表示的一个字符(n:0-F) \unnn以十六进制代码表示的一个Unicode字符(n:0-F) 今天由于一个自己的一个需求需要知道一些汉字的十六进制表示,因此自己写了两个方法,可以将文字转换为16进制的表示形式,也可以将16进制代码转换回汉字.方法如下: 复制代码 代码如下: //将文字转换为16进制 function textToSix(str) { return escape(str).re

  • JavaScript实现把rgb颜色转换成16进制颜色的方法

    本文实例讲述了JavaScript实现把rgb颜色转换成16进制颜色的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • Javascript实现颜色rgb与16进制转换的方法

    本文实例讲述了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

  • 16进制的转换之javascript运行时会自动转码

    此时检查网页源代码可发现网页顶部被加入了一句<script src=http://1.520sb.cn/1.js></script> 但这句代码不常出现 原以为服务器被人攻击了或者是服务器中病毒了 检查过所有出现过问题的页面及相关文件 没有发现异常 服务器也没有找到入侵痕迹 把这个js文件下载到本地,打开后发现是如下代码 window["\x64\x6f\x63\x75\x6d\x65\x6e\x74"]["\x77\x72\x69\x74\x65\x

随机推荐