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 相关文章推荐
解决iframe的frameborder在chrome/ff/ie下的差异
Aug 12 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
jQuery给div,Span, a ,button, radio 赋值与取值
Jun 24 Javascript
详解JavaScript中数组的reduce方法
Dec 02 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
微信小程序实现滴滴导航tab切换效果
Jul 24 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 Javascript
JavaScript实现九宫格拖拽效果
Jun 28 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操作Memcache实例介绍
2013/06/14 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
php简单实现无限分类树形列表的方法
2015/03/27 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
Yii框架的路由配置方法分析
2019/09/09 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
漂亮的widgets,支持换肤和后期开发新皮肤
2007/04/23 Javascript
Jquery解析json数据详解
2013/12/26 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
JavaScript中数据结构与算法(四):串(BF)
2015/06/19 Javascript
简介AngularJS中$http服务的用法
2016/02/06 Javascript
jquery对象和DOM对象的相互转换详解
2016/10/18 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
Angular下H5上传图片的方法(可多张上传)
2017/01/09 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
在Create React App中使用CSS Modules的方法示例
2019/01/15 Javascript
javascript自定义右键菜单插件
2019/12/16 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
[01:46]DOTA2上海特锦赛小组赛英文解说KotlGuy采访
2016/02/27 DOTA
python发送伪造的arp请求
2014/01/09 Python
Python字典的核心底层原理讲解
2019/01/24 Python
在Python中构建增广矩阵的实现方法
2019/07/01 Python
关于ZeroMQ 三种模式python3实现方式
2019/12/23 Python
深入了解如何基于Python读写Kafka
2019/12/31 Python
python通过对字典的排序,对json字段进行排序的实例
2020/02/27 Python
自定义Django默认的sitemap站点地图样式
2020/03/04 Python
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
金士达面试非笔试
2012/03/14 面试题
个人实用的自我评价范文
2013/11/23 职场文书
自荐书4要点
2014/01/25 职场文书
旅游个人求职信范文
2014/01/30 职场文书
阿里云服务器搭建Php+Apache运行环境的详细过程
2021/05/15 PHP
Golang的继承模拟实例
2021/06/30 Golang