相思资源网 Design By www.200059.com

本文实例讲述了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) == "#" "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,16进制,颜色值,RGB,方法

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“JavaScript实现16进制颜色值转RGB的方法”

暂无JavaScript实现16进制颜色值转RGB的方法的评论...