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 相关文章推荐
js 日期转换成中文格式的函数
Jul 07 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
Javascript中this的用法详解
Sep 22 Javascript
浅谈JavaScript function函数种类
Dec 29 Javascript
javascript面向对象之定义成员方法实例分析
Jan 13 Javascript
Javascript毫秒数用法实例
Feb 05 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
javaScript如何跳出多重循环break、continue
Sep 01 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
Jan 13 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
Aug 14 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
PHP中$_SERVER的详细参数与说明
2008/07/29 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
Javascript 刷新全集常用代码
2009/11/22 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
javascript ajax 仿百度分页函数
2013/10/29 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
JavaScript中的Array 对象(数组对象)
2016/06/02 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
2016/11/10 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
详解支持Angular 2的表格控件
2017/01/19 Javascript
详解使用nvm安装node.js
2017/07/18 Javascript
JS的函数调用栈stack size的计算方法
2018/06/24 Javascript
vuedraggable+element ui实现页面控件拖拽排序效果
2020/07/29 Javascript
微信小程序 拍照或从相册选取图片上传代码实例
2019/08/28 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
JavaScript实现图片放大预览效果
2020/11/02 Javascript
python使用Flask框架获取用户IP地址的方法
2015/03/21 Python
python通过cookie模拟已登录状态的初步研究
2016/11/09 Python
python版本的仿windows计划任务工具
2018/04/30 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
彻彻底底地理解Python中的编码问题
2018/10/15 Python
在Pycharm中对代码进行注释和缩进的方法详解
2019/01/20 Python
python实现的自动发送消息功能详解
2019/08/15 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
HTML5 文件上传下载的实例代码
2017/07/03 HTML / CSS
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
水利学院求职自荐书
2014/02/01 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
合作合同协议书范本
2015/01/27 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
win10电脑右下角输入法图标不见了?Win10右下角不显示输入法的解决方法
2022/07/23 数码科技