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 相关文章推荐
jQuery 版本的文本输入框检查器Input Check
Jul 09 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
jquery实现鼠标拖动图片效果示例代码
Jan 09 Javascript
js document.write()使用介绍
Feb 21 Javascript
在JavaScript中调用Java类和接口的方法
Sep 07 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
web前端vue实现插值文本和输出原始html
Jan 19 Javascript
详解JavaScript中操作符和表达式
Sep 12 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
JavaScript如何优化逻辑判断代码详解
Jun 08 Javascript
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
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
js call方法详细介绍(js 的继承)
2013/11/18 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
基于JS实现PHP的sprintf函数实例
2015/11/14 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
2016/06/08 Javascript
vue.js树形组件之删除双击增加分支实例代码
2017/02/28 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
js轮播图的插件化封装详解
2017/07/17 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
2018/04/03 Javascript
node前端开发模板引擎Jade的入门
2018/05/11 Javascript
微信小程序仿朋友圈发布动态功能
2018/07/15 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
Python环境变量设置方法
2016/08/28 Python
Python从ZabbixAPI获取信息及实现Zabbix-API 监控的方法
2018/09/17 Python
python实现贪吃蛇游戏
2020/03/21 Python
详解将Pandas中的DataFrame类型转换成Numpy中array类型的三种方法
2019/07/06 Python
Python Django 简单分页的实现代码解析
2019/08/21 Python
Python文件路径名的操作方法
2019/10/30 Python
python机器学习实现决策树
2019/11/11 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
快速了解Python开发环境Spyder
2020/06/29 Python
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
LINUX下线程,GDI类的解释
2012/04/17 面试题
老人祝寿主持词
2014/03/28 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书
母亲去世追悼词
2015/06/23 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
PHP中多字节字符串操作实例详解
2021/08/23 PHP