JavaScript实现16进制颜色值转RGB的方法

前端技术 2023/09/01 JavaScript

本文实例讲述了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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/1495

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案