<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Background Color Changer</title>
<script>
function changeBackground(hexNumber) {
document.body.style.backgroundColor = hexNumber;
}
let prefix = "#";
let rnum1 = 0;
let bnum1 = 0;
let gnum1 = 0;
let rnum2 = 0;
let bnum2 = 0;
let gnum2 = 0;
let hexNumber2 = "#000000";
let rcount = 0;
let bcount = 0;
let gcount = 0;
function num2hex(num) {
return num.toString(16).padStart(2, '0');
}
function changeBackground2(number) {
if (number === 1) {
rnum1 = rcount % 16;
if (rcount < 15) {
rcount = rcount + 1;
}
}
if (number === 2) {
gnum1 = gcount % 16;
if (gcount < 15) {
gcount = gcount + 1;
}
}
if (number === 3) {
bnum1 = bcount % 16;
if (bcount < 15) {
bcount = bcount + 1;
}
}
if (number === 4) {
rnum1 = rcount % 16;
if (rcount > 0) {
rcount = rcount - 1;
}
}
if (number === 5) {
gnum1 = gcount % 16;
if (gcount > 0) {
gcount = gcount - 1;
}
}
if (number === 6) {
bnum1 = bcount % 16;
if (bcount > 0) {
bcount = bcount - 1;
}
}
hexNumber2 = prefix + num2hex(rnum1) + num2hex(rnum2) + num2hex(gnum1) + num2hex(gnum2) + num2hex(bnum1) + num2hex(bnum2);
document.bgColor=hexNumber2;
}
</script>
</head>
<body>
<center>
<form name="background">
<table width="350" border="3" cellpadding="3">
<tr>
<td align="center"><input type="button" value="Red" onclick="changeBackground('#FF0000')"></td>
<td align="center"><input type="button" value="Green" onclick="changeBackground('#00FF00')"></td>
<td align="center"><input type="button" value="Blue" onclick="changeBackground('#0000FF')"></td>
<td align="center"><input type="button" value="White" onclick="changeBackground('#FFFFFF')"></td>
<td align="center"><input type="button" value="Black" onclick="changeBackground('#000000')"></td>
<td align="center"><input type="button" value="Grey" onclick="changeBackground('#C0C0C0')"></td>
</tr>
</table>
<table width="350" border="3" cellpadding="3">
<tr>
<td><center>Variable Background Color Changer</center></td>
</tr>
</table>
<table width="350" border="3" cellpadding="3">
<tr>
<td align="center">
<input type="button" value="+ Red" onclick="changeBackground2(1)"><br />
<input type="button" value="- Red" onclick="changeBackground2(4)">
</td>
<td align="center">
<input type="button" value="+ Green" onclick="changeBackground2(2)"><br />
<input type="button" value="- Green" onclick="changeBackground2(5)">
</td>
<td align="center">
<input type="button" value="+ Blue" onclick="changeBackground2(3)"><br />
<input type="button" value="- Blue" onclick="changeBackground2(6)">
</td>
</tr>
</table>
<table width="350" border="3" cellpadding="3">
<tr>
<td><center>Keep pressing buttons to change color<br />(The color will start as black)</center></td>
</tr>
</table>
</form>
</center>
</body>
</html>
