利用html完成代码,要求完整且可以正常运行:键盘输入一个数,将其转换为二进制
时间: 2024-10-07 11:00:39 浏览: 14
HTML、JavaScript 和 CSS 可以结合使用来创建一个简单的网页,让用户输入一个数字并显示其二进制表示。以下是一个基本的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Number to Binary Converter</title>
<style>
#result {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>请输入一个整数:</h2>
<input type="number" id="inputNum" oninput="updateBinary()" placeholder="0">
<br>
<button onclick="updateBinary()">转换为二进制</button>
<p id="result"></p>
<script>
function updateBinary() {
const input = document.getElementById('inputNum');
const num = parseInt(input.value);
if (isNaN(num)) {
document.getElementById('result').innerText = '请输入一个有效的整数';
} else {
let binary = '';
while (num > 0) {
binary = (num % 2) + binary;
num = Math.floor(num / 2);
}
document.getElementById('result').innerText = `二进制表示: ${binary}`;
}
}
</script>
</body>
</html>
```
这个页面包含一个输入框让用户输入数字,一个按钮用于触发转换函数。`updateBinary`函数获取用户输入的值,验证它是否为有效整数,然后将其转换成二进制形式。
阅读全文