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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
JavaScript 字符串乘法
Aug 20 Javascript
js 获取浏览器高度和宽度值(多浏览器)
Sep 02 Javascript
JS 判断undefined的实现代码
Nov 26 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
JavaScript限定复选框的选择个数示例代码
Aug 25 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
Apr 27 jQuery
vue修改vue项目运行端口号的方法
Aug 04 Javascript
React操作真实DOM实现动态吸底部的示例
Oct 23 Javascript
微信小程序ajax实现请求服务器数据及模版遍历数据功能示例
Dec 15 Javascript
javaScript把其它类型转换为Number类型
Oct 13 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
2019年中国咖啡业现状与发展趋势
2021/03/04 咖啡文化
七款最流行的PHP本地服务器分享
2013/02/19 PHP
浅析Yii2缓存的使用
2016/05/10 PHP
thinkphp利用模型通用数据编辑添加和删除的实例代码
2016/11/20 PHP
Thinkphp 中 distinct 的用法解析
2016/12/14 PHP
微信封装的调用微信签名包的类库
2017/06/08 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
JS实现iframe自适应高度的方法(兼容IE与FireFox)
2016/06/24 Javascript
详解angular用$sce服务来过滤HTML标签
2017/04/11 Javascript
JS利用正则表达式实现简单的密码强弱判断实例
2017/06/16 Javascript
javaScript日期工具类DateUtils详解
2017/12/08 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
详解性能更优越的小程序图片懒加载方式
2018/07/18 Javascript
require.js 加载过程与使用方法介绍
2018/10/30 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
Vue简单封装axios之解决post请求后端接收不到参数问题
2020/02/16 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
[34:47]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第一场 11.18
2020/11/18 DOTA
Python使用PIL模块生成随机验证码
2017/11/21 Python
python如何在循环引用中管理内存
2018/03/20 Python
详解python tkinter教程-事件绑定
2019/03/28 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
初中美术教学反思
2014/01/29 职场文书
应届毕业生如何写求职信
2014/02/16 职场文书
家长对孩子的评语
2014/04/18 职场文书
安全标语口号
2014/06/09 职场文书
2014年小学工作总结
2014/11/26 职场文书
集结号观后感
2015/06/08 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS