写一个任意进制转换的程序

<!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 之间,确保输入有效。
  • 用户体验:
    • 添加了标签,使表单更易于理解。
    • 使用 minmax 属性限制了进制输入框的范围,并设置了默认值。
    • 使用 CSS 进行了简单的样式化,使界面更美观。
  • 清晰的输出: 将结果清晰地标记为“结果:”。

使用方法:

  1. 将代码保存为 HTML 文件 (例如,converter.html)。
  2. 在浏览器中打开该文件。
  3. 在“输入数字”字段中输入要转换的数字。
  4. 在“输入进制”字段中输入数字当前的进制 (2-36)。
  5. 在“输出进制”字段中输入要转换的目标进制 (2-36)。
  6. 点击“转换”按钮。
  7. 结果将显示在下方。

示例:

  • 将二进制数 101101 转换为十进制: 输入数字: 101101,输入进制: 2,输出进制: 10,结果: 45
  • 将十进制数 255 转换为十六进制: 输入数字: 255,输入进制: 10,输出进制: 16,结果: ff
  • 将十六进制数 1A 转换为八进制: 输入数字: 1A,输入进制: `
posted @ 2024-12-01 09:52  王铁柱6  阅读(40)  评论(0)    收藏  举报