帮我写一个网页键盘,我有四个输入框,能够输入二进制、八进制、十进制和十六进制,键盘可以向这四个输入框输入
时间: 2024-03-24 17:41:46 浏览: 54
键盘和输入框
好的,以下是一个可以向四个输入框输入的网页键盘的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>多进制数键盘</title>
</head>
<body>
<input type="text" id="bin-input" placeholder="二进制" readonly>
<input type="text" id="oct-input" placeholder="八进制" readonly>
<input type="text" id="dec-input" placeholder="十进制" readonly>
<input type="text" id="hex-input" placeholder="十六进制" readonly>
<div id="keypad">
<button class="key" onclick="addChar('0')">0</button>
<button class="key" onclick="addChar('1')">1</button>
<button class="key" onclick="addChar('2')">2</button>
<button class="key" onclick="addChar('3')">3</button>
<button class="key" onclick="addChar('4')">4</button>
<button class="key" onclick="addChar('5')">5</button>
<button class="key" onclick="addChar('6')">6</button>
<button class="key" onclick="addChar('7')">7</button>
<button class="key" onclick="addChar('8')">8</button>
<button class="key" onclick="addChar('9')">9</button>
<button class="key" onclick="addChar('A')">A</button>
<button class="key" onclick="addChar('B')">B</button>
<button class="key" onclick="addChar('C')">C</button>
<button class="key" onclick="addChar('D')">D</button>
<button class="key" onclick="addChar('E')">E</button>
<button class="key" onclick="addChar('F')">F</button>
<button class="key" onclick="addChar('.')">.</button>
<button class="key" onclick="backspace()">←</button>
</div>
<script>
function addChar(char) {
// 获取输入框内容
var binInput = document.getElementById("bin-input");
var octInput = document.getElementById("oct-input");
var decInput = document.getElementById("dec-input");
var hexInput = document.getElementById("hex-input");
var binText = binInput.value;
var octText = octInput.value;
var decText = decInput.value;
var hexText = hexInput.value;
// 如果已经有 32 个字符,则不再添加
if (binText.length >= 32) {
return;
}
// 添加字符并更新输入框内容
binText += char;
octText = parseInt(binText, 2).toString(8);
decText = parseInt(binText, 2).toString(10);
hexText = parseInt(binText, 2).toString(16).toUpperCase();
binInput.value = binText;
octInput.value = octText;
decInput.value = decText;
hexInput.value = hexText;
}
function backspace() {
// 获取输入框内容
var binInput = document.getElementById("bin-input");
var octInput = document.getElementById("oct-input");
var decInput = document.getElementById("dec-input");
var hexInput = document.getElementById("hex-input");
var binText = binInput.value;
var octText = octInput.value;
var decText = decInput.value;
var hexText = hexInput.value;
// 如果已经没有字符,则不再删除
if (binText.length == 0) {
return;
}
// 删除最后一个字符并更新输入框内容
binText = binText.slice(0, -1);
octText = parseInt(binText, 2).toString(8);
decText = parseInt(binText, 2).toString(10);
hexText = parseInt(binText, 2).toString(16).toUpperCase();
binInput.value = binText;
octInput.value = octText;
decInput.value = decText;
hexInput.value = hexText;
}
</script>
</body>
</html>
```
这个网页键盘包括四个输入框,分别用于输入二进制、八进制、十进制和十六进制数。当你点击数字键时,会将对应的字符添加到二进制输入框中,并自动更新其他三个输入框的内容。当你点击退格键时,会删除二进制输入框中的最后一个字符,并自动更新其他三个输入框的内容。你可以将这段代码保存到一个 HTML 文件中,然后在浏览器中打开它,就可以使用这个网页键盘了。
阅读全文