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 dialog键盘事件代码
Aug 01 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
jquery 实现返回顶部功能
Nov 17 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
去除html代码里面的script正则方法
May 19 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
JavaScript实现的鼠标响应颜色渐变效果完整实例
Feb 18 Javascript
vue和react等项目中更简单的实现展开收起更多等效果示例
Feb 22 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
May 15 Javascript
微信小程序地图实现展示线路
Jul 29 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 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
全国FM电台频率大全 - 26 西藏自治区
2020/03/11 无线电
合作指挥官:孟斯克
2020/03/16 星际争霸
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
php中substr()函数参数说明及用法实例
2014/11/15 PHP
PHP基于curl后台远程登录正方教务系统的方法
2016/10/14 PHP
PHP中的正则表达式实例详解
2017/04/25 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
javascript 写类方式之二
2009/07/05 Javascript
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
nodejs实用示例 缩址还原
2010/12/28 NodeJs
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
JavaScript中的6种运算符总结
2014/10/16 Javascript
js省市县三级联动效果实例
2020/04/15 Javascript
第十篇BootStrap轮播插件使用详解
2016/06/21 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
你真的了解BOM中的history对象吗
2017/02/13 Javascript
laydate 显示结束时间不小于开始时间的实例
2017/08/11 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
Node.js的进程管理的深入理解
2019/01/09 Javascript
Layui给switch添加响应事件的例子
2019/09/03 Javascript
vue中更改数组中属性,在页面中不生效的解决方法
2019/10/30 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
Django自定义用户认证示例详解
2018/03/14 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
Tensorflow模型实现预测或识别单张图片
2019/07/19 Python
Window10上Tensorflow的安装(CPU和GPU版本)
2020/12/15 Python
python复合条件下的字典排序
2020/12/18 Python
优秀大学生的自我评价
2014/01/16 职场文书
宪法宣传周工作方案
2014/05/26 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书