JavaScript基于DOM操作实现简单的数学运算功能示例

下面是“JavaScript基于DOM操作实现简单的数学运算功能示例”的完整攻略。

一、什么是DOM

DOM（文档对象模型）是指浏览器将HTML文档解析成树状结构的一种方式。在DOM中，每一个HTML元素（标签）都是一个对象，开发者通过JavaScript可以访问和操作这些对象，实现页面的动态效果和交互功能。

二、使用DOM操作实现简单的数学运算

1. 示例一：实现简单的加减乘除运算

该示例需要实现一个简单的计算器，用户可以输入两个数字，然后选择加、减、乘、除四种运算中的一种，最后点击“计算”按钮，页面将会显示出运算的结果。

HTML部分

  <p>请输入第一个数字：</p>
  <input type="text" id="num1" />
  <p>请输入第二个数字：</p>
  <input type="text" id="num2" />
  <p>请选择运算符：</p>
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <br/>
  <br/>
  <button onclick="calculate()">计算</button>
  <br/>
  <br/>
  <p id="result"></p>

JavaScript部分

function calculate() {
  var num1 = document.getElementById("num1").value;
  var num2 = document.getElementById("num2").value;
  var operator = document.getElementById("operator").value;
  var result = 0;
  switch (operator) {
    case "+":
      result = Number(num1) + Number(num2);
      break;
    case "-":
      result = Number(num1) - Number(num2);
      break;
    case "*":
      result = Number(num1) * Number(num2);
      break;
    case "/":
      if (num2 != 0) {
        result = Number(num1) / Number(num2);
      } else {
        alert("除数不能为0");
        return;
      }
      break;
    default:
      alert("请选择运算符");
      return;
  }
  document.getElementById("result").innerText = "计算结果为：" + result;
}

该示例通过JavaScript DOM操作，获取输入框和下拉框的值，并根据选择的运算符实现相应的运算，最终将结果显示在页面上。

2. 示例二：实现简单的图形计算

该示例需要实现一个图形计算器，用户可以选择计算圆形、矩形、三角形的面积和周长。当用户选择相应图形并输入对应参数后，点击“计算”按钮可以得到计算结果。

HTML部分

    <p>请选择图形：</p>
    <select id="shape">
      <option value="circle">圆形</option>
      <option value="rectangle">矩形</option>
      <option value="triangle">三角形</option>
    </select>
    <br/><br/>
    <div id="circle" style="display:none;">
      <p>请输入圆的半径：</p>
      <input type="text" id="circleR" /><br/><br/>
      <button onclick="calcCircle()">计算</button>
      <br/><br/>
      <p id="resCircle"></p>
    </div>
    <div id="rectangle" style="display:none;">
      <p>请输入矩形的高：</p>
      <input type="text" id="rectH" /><br/><br/>
      <p>请输入矩形的宽：</p>
      <input type="text" id="rectW" /><br/><br/>
      <button onclick="calcRectangle()">计算</button>
      <br/><br/>
      <p id="resRectangle"></p>
    </div>
    <div id="triangle" style="display:none;">
      <p>请输入三角形的底：</p>
      <input type="text" id="triB" /><br/><br/>
      <p>请输入三角形的高：</p>
      <input type="text" id="triH" /><br/><br/>
      <button onclick="calcTriangle()">计算</button>
      <br/><br/>
      <p id="resTriangle"></p>
    </div>

JavaScript部分

function showShape() {
  var shape = document.getElementById("shape").value;
  document.getElementById("circle").style.display = "none";
  document.getElementById("rectangle").style.display = "none";
  document.getElementById("triangle").style.display = "none";
  switch (shape) {
    case "circle":
      document.getElementById("circle").style.display = "block";
      break;
    case "rectangle":
      document.getElementById("rectangle").style.display = "block";
      break;
    case "triangle":
      document.getElementById("triangle").style.display = "block";
      break;
  }
}

function calcCircle() {
  var r = document.getElementById("circleR").value;
  var area = Math.PI * r * r;
  var circumference = 2 * Math.PI * r;
  document.getElementById("resCircle").innerHTML =
    "圆形的面积：" + area.toFixed(2) + "<br/>圆形的周长：" + circumference.toFixed(2);
}

function calcRectangle() {
  var h = document.getElementById("rectH").value;
  var w = document.getElementById("rectW").value;
  var area = h * w;
  var perimeter = 2 * (Number(h) + Number(w));
  document.getElementById("resRectangle").innerHTML =
    "矩形的面积：" + area.toFixed(2) + "<br/>矩形的周长：" + perimeter.toFixed(2);
}

function calcTriangle() {
  var b = document.getElementById("triB").value;
  var h = document.getElementById("triH").value;
  var area = 0.5 * b * h;
  var perimeter = Number(b) + Number(h) + Math.sqrt(b * b + h * h);
  document.getElementById("resTriangle").innerHTML =
    "三角形的面积：" + area.toFixed(2) + "<br/>三角形的周长：" + perimeter.toFixed(2);
}

该示例通过JavaScript DOM操作，实现选择图形、展示对应参数输入框、计算展示结果等完整计算器功能。

以上是使用DOM操作实现简单的数学运算功能的攻略说明，希望对你有所帮助。