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="转换">