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


Posted in Javascript onFebruary 09, 2015

本文实例讲述了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实现16进制颜色值转RGB的方法

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

Javascript 相关文章推荐
JavaScript 设计模式学习 Factory
Jul 29 Javascript
document.onreadystatechange事件的用法分析
Oct 17 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
Dec 12 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
JS出现失效的情况总结
Jan 20 Javascript
ES6学习之变量的解构赋值
Feb 12 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
element-ui组件table实现自定义筛选功能的示例代码
Mar 15 Javascript
灵活使用console让js调试更简单的方法步骤
Apr 23 Javascript
vue中defineProperty和Proxy的区别详解
Nov 30 Vue.js
js选项卡的实现方法
Feb 09 #Javascript
js实现checkbox全选、不选与反选的方法
Feb 09 #Javascript
angularJS中router的使用指南
Feb 09 #Javascript
javascript实现按回车键切换焦点
Feb 09 #Javascript
jquery中ajax使用error调试错误的方法
Feb 08 #Javascript
JQuery中extend的用法实例分析
Feb 08 #Javascript
jQuery中noConflict()用法实例分析
Feb 08 #Javascript
You might like
咖啡与水的关系
2021/03/03 冲泡冲煮
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
写出高质量的PHP程序
2012/02/04 PHP
php读取文件内容的三种可行方法示例介绍
2014/02/08 PHP
DOM2非标准但却支持很好的几个属性小结
2012/01/21 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
2013/08/26 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
window.location 对象所包含的属性
2014/10/10 Javascript
jQuery异步获取json数据方法汇总
2014/12/22 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
2018/09/25 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
基于vue实现圆形菜单栏组件
2019/07/05 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
JS 创建对象的模式实例小结
2020/04/28 Javascript
[59:36]2018DOTA2亚洲邀请赛 4.3 突围赛 Secret vs VG 第二场
2018/04/04 DOTA
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
教你如何将 Sublime 3 打造成 Python/Django IDE开发利器
2014/07/04 Python
详解Django中的form库的使用
2015/07/18 Python
解决python3 urllib中urlopen报错的问题
2017/03/25 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
为数据库创建索引都需要注意些什么
2012/07/17 面试题
生物化学研究助理员求职信
2013/10/09 职场文书
开业典礼主持词
2014/03/21 职场文书
房产委托公证书
2014/04/08 职场文书
大学班级文化建设方案
2014/05/06 职场文书
2014年团队工作总结
2014/11/24 职场文书
律师函格式范本
2015/05/27 职场文书
MySQL去除重叠时间求时间差和的实现
2021/08/23 MySQL
yolov5返回坐标的方法实例
2022/03/17 Python