完整代码:
<body>
<p><span>红:</span>
<input type="button" value="-" id="btnRL">
<input type="text" value="110" id="r_txt">
<input type="button" value="+" id="btnRR">
</p>
<p>
<span>绿:</span>
<input type="button" value="-" id="btnGL">
<input type="text" value="222" id="g_txt">
<input type="button" value="+" id="btnGR">
</p>
<p>
<span>蓝:</span>
<input type="button" value="-" id="btnBL">
<input type="text" value="222" id="b_txt">
<input type="button" value="+" id="btnBR">
</p>
<script type="text/javascript">
// 获取文本内值
var or = parseInt(document.getElementById('r_txt').value);
var og = parseInt(document.getElementById('g_txt').value);
var ob = parseInt(document.getElementById('b_txt').value);
// 获取text文本对象
var orOb = document.getElementById('r_txt');
var ogOb = document.getElementById('g_txt');
var obOb = document.getElementById('b_txt');
// 初始化背景色
var cChar = or + "," + og + "," + ob;
document.bgColor = cChar;
var obtnRL = document.getElementById('btnRL');
var obtnRR = document.getElementById('btnRR');
var oBtnGL = document.getElementById('btnGL');
var oBtnGR = document.getElementById('btnGR');
var obtnBL = document.getElementById('btnBL');
var obtnBR = document.getElementById('btnBR');
// 点击-+按钮,调节背景颜色
obtnRL.onclick = bgRLighter;
obtnRR.onclick = bgRBigger;
oBtnGL.onclick = bgGLighter;
oBtnGR.onclick = bgGBigger;
obtnBL.onclick = bgBLighter;
obtnBR.onclick = bgBBigger;
var isLegit = false;
// 用户改变
orOb.onblur = function () {
or = document.getElementById('r_txt').value
isLegit = (function(or){
// var isLegit = false;
if (or < 0 || or > 255) {
isLegit = true;
} else {
isLegit = false;
}
return isLegit;
})(or);
if (isLegit) {
alert("请输入0~255之间的合法RGB值!!!");
return;
}
cChar = or + "," + og + "," + ob;
document.bgColor = cChar;
}
ogOb.onblur = function () {
og = document.getElementById('g_txt').value;
isLegit = (function(og){
if (og < 0 || og > 255) {
isLegit = true;
} else {
isLegit = false;
}
return isLegit;
})(og);
if (isLegit) {
alert("请输入0~255之间的合法RGB值!!!");
return;
}
cChar = or + "," + og + "," + ob;
document.bgColor = cChar;
}
obOb.onblur = function () {
ob = document.getElementById('b_txt').value;
isLegit = (function(ob){
if (ob < 0 || ob > 255) {
isLegit = true;
} else {
isLegit = false;
}
return isLegit;
})(ob);
if (isLegit) {
alert("请输入0~255之间的合法RGB值!!!");
return;
}
cChar = or + "," + og + "," + ob;
document.bgColor = cChar;
}
function bgRLighter() {
or--;
if (or < 0 || or > 255) {
return;
}
cChar = or + "," + og + "," + ob;
document.getElementById('r_txt').value = or;
document.bgColor = cChar;
}
function bgRBigger() {
or++;
if (or < 0 || or > 255) {
return;
}
cChar = or + "," + og + "," + ob;
document.getElementById('r_txt').value = or;
document.bgColor = cChar;
}
function bgGLighter() {
og--;
if (og < 0 || og > 255) {
return;
}
cChar = or + "," + og + "," + ob;
document.getElementById('g_txt').value = og;
document.bgColor = cChar;
}
function bgGBigger() {
og++;
if (og < 0 || og > 255) {
return;
}
cChar = or + "," + og + "," + ob;
document.getElementById('g_txt').value = og;
document.bgColor = cChar;
}
function bgBLighter() {
ob--;
if (ob < 0 || ob > 255) {
return;
}
cChar = or + "," + og + "," + ob;
document.getElementById('b_txt').value = ob;
document.bgColor = cChar;
}
function bgBBigger() {
ob++;
if (ob < 0 || ob > 255) {
return;
}
cChar = or + "," + og + "," + ob;
document.getElementById('b_txt').value = ob;
document.bgColor = cChar;
}
</script>
</body>