<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>任意进制转换</title><style>body {font-family: sans-serif;}label {display: block;margin-bottom: 5px;}input[type="text"] {width: 200px;padding: 5px;margin-bottom: 10px;}select {padding: 5px;margin-bottom: 10px;}button {padding: 8px 15px;background-color: #4CAF50;color: white;border: none;cursor: pointer;}#result {margin-top: 10px;font-weight: bold;}</style>
</head>
<body><h1>任意进制转换</h1><label for="inputNumber">输入数字:</label><input type="text" id="inputNumber"><label for="inputBase">输入进制 (2-36):</label><input type="number" id="inputBase" min="2" max="36" value="10"><label for="outputBase">输出进制 (2-36):</label><input type="number" id="outputBase" min="2" max="36" value="2"><button onclick="convert()">转换</button><div id="result"></div><script>function convert() {const inputNumber = document.getElementById("inputNumber").value;const inputBase = parseInt(document.getElementById("inputBase").value);const outputBase = parseInt(document.getElementById("outputBase").value);let result;try {// 将输入数字转换为十进制const decimalValue = parseInt(inputNumber, inputBase);// 检查是否转换成功if (isNaN(decimalValue)) {throw new Error("输入无效，请检查数字和进制是否匹配。");}// 将十进制值转换为目标进制result = decimalValue.toString(outputBase);} catch (error) {result = "错误: " + error.message;}document.getElementById("result").textContent = "结果: " + result;}</script></body>
</html>
改进说明:
- 错误处理: 增加了
try...catch块来处理无效输入（例如，在二进制输入中使用字母）和进制范围之外的输入。 提供更友好的错误信息。 - 输入验证: 使用
parseInt并将进制限制在 2 到 36 之间，确保输入有效。 - 用户体验:
- 添加了标签，使表单更易于理解。
- 使用
min和max属性限制了进制输入框的范围，并设置了默认值。 - 使用 CSS 进行了简单的样式化，使界面更美观。
- 清晰的输出: 将结果清晰地标记为“结果:”。
使用方法:
- 将代码保存为 HTML 文件 (例如，
converter.html)。 - 在浏览器中打开该文件。
- 在“输入数字”字段中输入要转换的数字。
- 在“输入进制”字段中输入数字当前的进制 (2-36)。
- 在“输出进制”字段中输入要转换的目标进制 (2-36)。
- 点击“转换”按钮。
- 结果将显示在下方。
示例:
- 将二进制数
101101转换为十进制: 输入数字:101101，输入进制:2，输出进制:10，结果:45。 - 将十进制数
255转换为十六进制: 输入数字:255，输入进制:10，输出进制:16，结果:ff。 - 将十六进制数
1A转换为八进制: 输入数字:1A，输入进制: `
