帮我写一个网页键盘,我有四个输入框,能够输入二进制、八进制、十进制和十六进制,键盘可以选择向这四个输入框的某一个输入,当输入其中一个,可以改变其他三个的内容,完整代码写在一个html中
时间: 2024-03-25 12:35:24 浏览: 21
好的,以下是一个简单的网页键盘,使用JavaScript实现输入框之间的联动,可以输入二进制、八进制、十进制和十六进制。请将以下代码保存为HTML文件并在浏览器中打开进行测试。
```html
<!DOCTYPE html>
<html>
<head>
<title>Keyboard Input</title>
</head>
<body>
<label for="binary-input">Binary:</label>
<input type="text" id="binary-input"><br><br>
<label for="octal-input">Octal:</label>
<input type="text" id="octal-input"><br><br>
<label for="decimal-input">Decimal:</label>
<input type="text" id="decimal-input"><br><br>
<label for="hexadecimal-input">Hexadecimal:</label>
<input type="text" id="hexadecimal-input"><br><br>
<div>
<button onclick="inputTo('binary-input')">0</button>
<button onclick="inputTo('binary-input')">1</button>
<button onclick="inputTo('binary-input')">Clear</button>
</div>
<div>
<button onclick="inputTo('octal-input')">0</button>
<button onclick="inputTo('octal-input')">1</button>
<button onclick="inputTo('octal-input')">2</button>
<button onclick="inputTo('octal-input')">3</button>
<button onclick="inputTo('octal-input')">4</button>
<button onclick="inputTo('octal-input')">5</button>
<button onclick="inputTo('octal-input')">6</button>
<button onclick="inputTo('octal-input')">7</button>
<button onclick="inputTo('octal-input')">Clear</button>
</div>
<div>
<button onclick="inputTo('decimal-input')">0</button>
<button onclick="inputTo('decimal-input')">1</button>
<button onclick="inputTo('decimal-input')">2</button>
<button onclick="inputTo('decimal-input')">3</button>
<button onclick="inputTo('decimal-input')">4</button>
<button onclick="inputTo('decimal-input')">5</button>
<button onclick="inputTo('decimal-input')">6</button>
<button onclick="inputTo('decimal-input')">7</button>
<button onclick="inputTo('decimal-input')">8</button>
<button onclick="inputTo('decimal-input')">9</button>
<button onclick="inputTo('decimal-input')">Clear</button>
</div>
<div>
<button onclick="inputTo('hexadecimal-input')">0</button>
<button onclick="inputTo('hexadecimal-input')">1</button>
<button onclick="inputTo('hexadecimal-input')">2</button>
<button onclick="inputTo('hexadecimal-input')">3</button>
<button onclick="inputTo('hexadecimal-input')">4</button>
<button onclick="inputTo('hexadecimal-input')">5</button>
<button onclick="inputTo('hexadecimal-input')">6</button>
<button onclick="inputTo('hexadecimal-input')">7</button>
<button onclick="inputTo('hexadecimal-input')">8</button>
<button onclick="inputTo('hexadecimal-input')">9</button>
<button onclick="inputTo('hexadecimal-input')">A</button>
<button onclick="inputTo('hexadecimal-input')">B</button>
<button onclick="inputTo('hexadecimal-input')">C</button>
<button onclick="inputTo('hexadecimal-input')">D</button>
<button onclick="inputTo('hexadecimal-input')">E</button>
<button onclick="inputTo('hexadecimal-input')">F</button>
<button onclick="inputTo('hexadecimal-input')">Clear</button>
</div>
<script>
function inputTo(inputId) {
var input = document.getElementById(inputId);
var value = input.value;
var radix = 10;
if (inputId === 'binary-input') {
radix = 2;
} else if (inputId === 'octal-input') {
radix = 8;
} else if (inputId === 'decimal-input') {
radix = 10;
} else if (inputId === 'hexadecimal-input') {
radix = 16;
}
if (value === 'Clear') {
input.value = '';
return;
}
var num = parseInt(value, radix);
document.getElementById('binary-input').value = num.toString(2);
document.getElementById('octal-input').value = num.toString(8);
document.getElementById('decimal-input').value = num.toString(10);
document.getElementById('hexadecimal-input').value = num.toString(16);
}
</script>
</body>
</html>
```
在这个示例中,我们使用了四个输入框和一个键盘,键盘包括四个按钮,每个按钮都可以向其中一个输入框中输入数字或字母,并且还包括一个Clear按钮,可以清除当前输入框中的内容。
在JavaScript代码中,我们定义了一个`inputTo`函数,当用户点击一个按钮时,点击事件会触发这个函数。这个函数首先获取被点击的按钮对应的输入框,并根据输入框的类型(二进制、八进制、十进制或十六进制)确定进制。然后,它将输入框中的值解析为一个整数,并使用`toString`方法将其转换为二进制、八进制、十进制或十六进制字符串,最后将这些字符串分别设置为四个输入框的值,从而实现输入框之间的联动。