js如何用input框的value值添加到css背景颜色的rgb中
2个回答
展开全部
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>发送</title>
<style type="text/css">
table{
border-collapse:collapse;
}
table td {
border: 1px solid #000000;
padding: 2px 5px;
}
input.warning{
border-color: red;
}
</style>
<script type="text/javascript">
String.prototype.padLeft = function (len, charStr) {
return new Array(len - this.length + 1).join(charStr, '') + this;
}
function changeBgColor(input){
var rgbInput = document.getElementById("rgb");
var redInput = document.getElementById("red");
var greenInput = document.getElementById("green");
var blueInput = document.getElementById("blue");
var redValue = Number(redInput.value);
var greenValue = Number(greenInput.value);
var blueValue = Number(blueInput.value);
if(redValue < 0 || redValue > 255 || isNaN(redValue))
{
alert("red value invalid");
redInput.className = "warning";
return;
}
redInput.className = "";
if(greenValue < 0 || greenValue > 255 || isNaN(greenValue))
{
alert("green value invalid");
greenInput.className = "warning";
return;
}
greenInput.className = "";
if(blueValue < 0 || blueValue > 255 || isNaN(blueValue))
{
alert("blue value invalid");
blueInput.className = "warning";
return;
}
blueInput.className = "";
document.body.style.backgroundColor = "#" + redValue.toString(16).padLeft(2, '0') + greenValue.toString(16).padLeft(2, '0') + blueValue.toString(16).padLeft(2, '0');
}
</script>
</head>
<body>
<table>
<tr><td>red:</td><td><input type="text" id="red" name="red" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
<tr><td>green:</td><td><input type="text" id="green" name="green" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
<tr><td>blue:</td><td><input type="text" id="blue" name="blue" onchange="changeBgColor(this)" placeholder="please input 0-255"/></td></tr>
</table>
</body>
</html>
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
