j avascript html 简易计算机

简易的JavaScript HTML计算器可以是一个简单的交互式网页应用，它结合了HTML的布局和CSS样式，以及JavaScript的事件处理和数学运算功能。通常包括输入框用于用户输入数字，按钮用于选择操作符如加减乘除等，以及一个结果显示区域。

HTML部分会创建基本的结构，比如输入框、按钮标签，并将它们组织成计算器的界面布局。例如：

<div>
  <input type="text" id="display" disabled>
  <div class="buttons">
    <button>7</button>
    <button>8</button>
    <button>9</button>
    <button>=</button>
  </div>
  <div class="buttons">
    <button>4</button>
    <button>5</button>
    <button>6</button>
    <button>-</button>
  </div>
  <!-- ...其他数字和运算符按钮 -->
</div>

JavaScript部分则添加事件监听器，当用户点击按钮时，会读取输入并执行相应的计算，更新显示结果。例如：

const buttons = document.querySelectorAll('.buttons button');
const display = document.getElementById('display');

buttons.forEach(button => {
  button.addEventListener('click', function() {
    if (this.innerText === '=') {
      // 进行计算
      const result = eval(display.value);
      display.value = result;
    } else {
      // 添加数字或运算符到显示区域
      display.value += this.innerText;
    }
  });
});

然而，要注意的是，`eval()`函数有安全风险，因为它能执行任意JavaScript代码，实际项目中应避免直接使用。