javascript 16进制颜色转RGB

javascript 16进制颜色转RGB

javascript

window.onload = function () {
    document.getElementById("change").onclick = function () {
        var color = document.getElementById("color_get").value;
        var _R,
            _G,
            _B;
 
        if (color.length == 4) {
            _R = parseInt(color.substr(1,1),16);
            _G = parseInt(color.substr(2,1),16);
            _B = parseInt(color.substr(3,1),16);
 
            document.getElementById("color_txt").innerHTML = "R(" + _R * _R + ")" + "," + "G(" + _G * _G + ")" + "," + "B(" + _B * _B + ")";
        }
        else if (color.length == 7) {
            _R = parseInt(color.substr(1,2),16);
            _G = parseInt(color.substr(3,2),16);
            _B = parseInt(color.substr(5,2),16);
 
            document.getElementById("color_txt").innerHTML = "R(" + _R + ")" + "," + "G(" + _G + ")" + "," + "B(" + _B + ")";
        }
        else {
            document.getElementById("color_txt").innerHTML = "请输入正确格式,例如:#FFFFFF";
        }
 
        document.getElementById("color_img").style.backgroundColor = color;
          
    }
}

css:

#color_img {
    width: 100px;
    height: 100px;
    border: 1px solid #e5e5e5;
}
 
#color_txt {
    color: #4d4d4d;
    font: 14px/24px Arial;
}

html:

<div></div>
<div></div>
<input type="text"><input type="button" value="转换">

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzwffz.html