首页 > 网站 > WEB开发 > 正文

JavaScript 16进制颜色值转RGB

2024-04-27 14:13:01
字体:
来源:转载
供稿:网友
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>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表