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

<!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，输入进制: `

posted @ 2024-12-01 09:52 王铁柱6 阅读(40) 评论(0) 收藏举报

刷新页面返回顶部

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

公告