JavaScript BaseX转换器：在不同进制间转换数字

在计算机科学和数学领域中，数字以各种进制系统表示，如十进制、二进制、十六进制和八进制。在这些不同的进制系统之间转换数字是一个常见的需求。例如，您可能需要将一个十进制数转换为二进制数，将一个二进制数转换为八进制数，甚至在像基数15这样较少见的进制之间进行转换。手动执行这些转换可能耗时且容易出错。为了满足这个需求，我们呈现了BaseX转换器，这是一个方便的工具，可以轻松地将数字从一种进制转换为另一种进制。

示例：

1. 输入：将(13)₁₆转换为十进制

让我们以将数字(13)₁₆转换为十进制为例。我们可以将转换过程分解如下：

首先，我们将数字的每个位数与相应的16的幂相乘：

(13)₁₆ = 1 * 16^1 + 3 * 16^0

接下来，我们计算上述乘法的结果：

(13)₁₆ = 16 + 3

最后，我们将结果相加得到十进制的等价：

(13)₁₆ = 19₁₀

因此，(13)₁₆等于十进制的(19)₁₀。

2. 输入：将(10101)₂转换为八进制：

现在，让我们将二进制数(10101)₂转换为八进制。转换过程涉及将二进制数字从右到左分组为每组三位，并将每个组转换为八进制的等价：

(10101)₂ = 010 101

然后，将分组的二进制数字转换为八进制：

010₂ = 2₈

101₂ = 5₈

将八进制数字组合在一起，我们得到：

(10101)₂ = (25)₈

因此，(10101)₂等于八进制的(25)₈。

先决条件

HTML
CSS
Javascript

方法

设置HTML结构，包括输入字段用于输入数字，从哪个进制转换和转换到哪个进制，以及一个按钮和结果显示区域。
实现convert()函数：
- 从相应字段中检索输入值。
- 使用 parseInt() 将输入数字从指定的“fromBase”转换为十进制。
- 使用 toString() 将十进制数转换为指定的“toBase”。
- 使用转换后的结果更新结果显示区域。
使用CSS对网页进行样式设计，创建视觉上吸引人的布局。
当用户点击“转换”按钮时，执行convert()函数，执行转换并使用转换后的值更新结果显示区域。

示例： 在本示例中，我们将使用HTML、CSS和JS来演示进制转换器。

HTML

<!-- index.html  -->
<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
          BaseX Calculator 
      </title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
        } 
  
        h1 { 
            text-align: center; 
        } 
  
        #converter { 
            margin: 20px auto; 
            width: 300px; 
            text-align: center; 
        } 
  
        label { 
            display: block; 
            margin: 5px 5px; 
        } 
  
        input[type="number"] { 
            width: 100%; 
            padding: 5px; 
            box-sizing: border-box; 
        } 
  
        select { 
            width: 100%; 
            padding: 5px; 
            box-sizing: border-box; 
            margin-bottom: 10px; 
        } 
  
        button { 
            padding: 10px 20px; 
            background-color: #4caf50; 
            color: white; 
            border: none; 
            cursor: pointer; 
            margin: 5px 5px; 
        } 
  
        #result { 
            margin-top: 20px; 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <h1>BaseX Calculator</h1> 
    <div id="converter"> 
        <label>Number:</label> 
        <input type="number" id="numberInput" /> 
        <label>From Base:</label> 
        <input type="number" id="fromBaseInput" /> 
        <label>To Base:</label> 
        <input type="number" id="toBaseInput" /> 
        <button onclick="convert()"> 
              Convert 
          </button> 
    </div> 
    <div id="result"></div> 
  
    <script> 
        function convert() { 
            let numberInput =  
                document.getElementById("numberInput").value; 
            let fromBase =  
                parseInt(document.getElementById("fromBaseInput").value); 
            let toBase =  
                parseInt(document.getElementById("toBaseInput").value); 
            let result = ""; 
  
            // Convert the number from the "fromBase" to decimal 
            let decimalNumber =  
                parseInt(numberInput, fromBase); 
  
            // Convert the decimal number to the "toBase" 
            result =  
            decimalNumber.toString(toBase); 
  
            document.getElementById("result").innerHTML =  
              "Result: " + result; 
        } 
    </script> 
</body> 
  
</html>