使用 HTML + JavaScript 实现进制转换工具（附源码地址）

在日常开发、计算机学习以及底层调试场景中，不同进制之间的数值转换是一项高频且基础的需求。无论是嵌入式工程师处理寄存器数据，还是前端开发者解析颜色代码与权限掩码，都需要在二进制、八进制、十进制和十六进制之间快速切换。本文将介绍如何使用 HTML、CSS 和 JavaScript 实现一个进制转换工具。

效果演示

用户进入页面后，首先会在顶部看到一个清晰的文本输入框，用于录入待转换的数值。紧随其后的是两个并排的下拉选择器，分别代表“源进制”和“目标进制”，默认状态下分别为十进制和十六进制。当用户在输入框中键入数字并点击“转换”按钮，或者直接按下回车键时，系统会立即对输入内容进行合法性校验。如果输入的字符不符合当前选定的进制规范，输入框下方会即时显示红色的错误提示，且结果区域保持空白。一旦校验通过，下方的结果卡片中会瞬间呈现出转换后的数值，且十六进制结果会自动转换为大写字母显示，确保视觉上的统一与专业。

页面结构

页面主要包括输入区域、控制区域和结果展示区域。

输入区域

输入区域是用户交互的起点，包含一个标签、一个文本输入框以及一个隐藏的错误提示层。

＜div class="input-group"＞  ＜label for="inputValue"＞输入数值＜/label＞  ＜input type="text" id="inputValue" placeholder="请输入要转换的数值"＞  ＜div class="error" id="errorMsg"＞输入的数值不符合当前进制规范＜/div＞＜/div＞

控制区域

控制区域由两个并排的下拉菜单组成，分别用于选择源进制和目标进制。

＜div class="row"＞  ＜div class="col"＞    ＜div class="input-group"＞      ＜label for="fromBase"＞源进制＜/label＞      ＜select id="fromBase"＞        ＜option value="2"＞二进制＜/option＞        ＜option value="8"＞八进制＜/option＞        ＜option value="10" selected＞十进制＜/option＞        ＜option value="16"＞十六进制＜/option＞      ＜/select＞    ＜/div＞  ＜/div＞  ＜div class="col"＞    ＜div class="input-group"＞      ＜label for="toBase"＞目标进制＜/label＞      ＜select id="toBase"＞        ＜option value="2"＞二进制＜/option＞        ＜option value="8"＞八进制＜/option＞        ＜option value="10"＞十进制＜/option＞        ＜option value="16" selected＞十六进制＜/option＞      ＜/select＞    ＜/div＞  ＜/div＞＜/div＞

结果展示区域

结果区域位于页面底部，通过一条灰色的分割线与上方功能区隔开。

＜div class="result-group"＞  ＜div class="result-item"＞    ＜div class="result-label"＞转换结果＜/div＞    ＜div class="result-value" id="resultValue"＞-＜/div＞  ＜/div＞＜/div＞

核心功能实现

本工具的核心逻辑集中在数值的合法性校验与进制间的数学转换。为了确保用户体验的流畅性，我们采用了原生 JavaScript 监听多种交互事件，并利用正则表达式（Regular Expression）进行高效的模式匹配。

输入合法性校验机制

在处理任何转换逻辑之前，首要任务是确保用户输入的数据在当前选定的进制下是合法的。不同的进制系统拥有特定的字符集：二进制仅允许 0 和 1；八进制允许 0-7；十进制允许 0-9；而十六进制则额外包含了 a-f（或 A-F）。

为了实现这一逻辑，我们定义了一个名为 validateInput 的工具函数。该函数接收当前的输入值 value 和源进制 base 作为参数。内部实现上，我们构建了一个映射对象 validChars，其键名为进制数，键值为对应的正则表达式。通过调用正则的 .test() 方法，我们可以快速返回布尔值来判断输入是否合规。

function validateInput(value, base) {  if (!value || value.trim() === '') {    return false;  }  const validChars = {    2: /^[01]+$/,    8: /^[0-7]+$/,    10: /^[0-9]+$/,    16: /^[0-9a-fA-F]+$/  };  return validChars[base].test(value.trim());}

进制转换的核心算法

JavaScript 语言本身提供了非常强大的内置方法来完成进制转换，这使得我们无需手动编写复杂的逻辑。整个转换过程分为两步：首先将任意进制的字符串转换为十进制整数，然后再将该十进制整数转换为目标进制的字符串。

在 convert 函数中，我们首先获取输入框的值以及两个下拉菜单选中的进制值。利用 parseInt(value, from) 方法，可以将指定进制的字符串解析为十进制的 Number 类型。如果解析失败（例如输入了非法字符），该方法会返回 NaN。接着，我们调用十进制数值的 .toString(to) 方法，将其转换为目标进制的字符串表示形式。值得注意的是，十六进制的结果通常习惯使用大写字母（如 FF 而非 ff），因此我们在最后链式调用了 .toUpperCase() 方法进行格式化。

function convert() {  const value = inputValue.value.trim();  const from = parseInt(fromBase.value);  const to = parseInt(toBase.value);
  if (!validateInput(value, from)) {    errorMsg.classList.add('show');    resultValue.textContent = '-';    return;  }
  errorMsg.classList.remove('show');
  const decimalValue = parseInt(value, from);
  if (isNaN(decimalValue)) {    errorMsg.classList.add('show');    resultValue.textContent = '-';    return;  }
  resultValue.textContent = decimalValue.toString(to).toUpperCase();}

交互事件的自动化处理

为了提升工具的易用性，我们不能仅依赖用户点击“转换”按钮。在现代 Web 交互设计中，实时的反馈至关重要。这里我们为多个 DOM 元素绑定了事件监听器，以实现自动触发转换的功能。

首先是输入框的 keypress 事件，当检测到用户按下回车键（Enter）时，直接调用 convert() 函数。其次，针对两个下拉选择器 fromBase 和 toBase，我们监听了它们的 change 事件。这意味着当用户改变了进制的设定，只要输入框内存在有效内容，程序就会立即根据新的进制规则重新执行转换逻辑。

convertBtn.addEventListener('click', convert);
inputValue.addEventListener('keypress', function(e) {  if (e.key === 'Enter') {    convert();  }});
fromBase.addEventListener('change', function() {  if (inputValue.value.trim()) {    convert();  }});
toBase.addEventListener('change', function() {  if (inputValue.value.trim()) {    convert();  }});

源码地址

git 地址：https://gitee.com/ironpro/hjdemo/blob/master/convert/index.html

阅读原文：https://mp.weixin.qq.com/s/-QEX0FF4pEJD5de6IQ1cjg