JavaScript功能实例演示 ｜ 青训营

清都
91 阅读3分钟

前言

在这个简单项目实例中，我将会使用JavaScript创建一个简单的计算器。这个计算器将允许用户执行加、减、乘、除等基本运算。

正文

以下是实现这个计算器的基本步骤：

  1. 创建HTML文件。
  2. 添加JavaScript代码以实现计算器功能。
  3. 测试和调试应用。

HTML文件

<body>
  <h1>Simple Calculator</h1>
  <input type="text" id="input1" placeholder="Enter first number">
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="text" id="input2" placeholder="Enter second number">
  <button id="calculate-button">Calculate</button>
  <p id="result"></p>
  <script src="script.js"></script>
</body>

上述是一个为了实现功能的简单的静态网页，在这里我就不过多赘述，接下来我们就要通过JS来实现一个简单的交互

JavaScript代码

const input1 = document.getElementById('input1');
const input2 = document.getElementById('input2');
const operator = document.getElementById('operator');
const calculateButton = document.getElementById('calculate-button');
const result = document.getElementById('result');
calculateButton.addEventListener('click', calculate);
function calculate() {
  const num1 = parseFloat(input1.value);
  const num2 = parseFloat(input2.value);
  const oper = operator.value;
  if (isNaN(num1) || isNaN(num2)) {
    result.textContent = 'Please enter valid numbers';
    return;
  }
  switch (oper) {
    case '+':
      result.textContent = (num1 + num2).toString();
      break;
    case '-':
      result.textContent = (num1 - num2).toString();
      break;
    case '*':
      result.textContent = (num1 * num2).toString();
      break;
    case '/':
      result.textContent = (num1 / num2).toString();
      break;
    default:
      result.textContent = 'Invalid operator';
      break;
  }
}

下面是如何使用JavaScript如何实现这一功能的具体解析

  • const input1 = document.getElementById('input1'): 获取ID为"input1"的元素。
  • const input2 = document.getElementById('input2'): 获取ID为"input2"的元素。
  • const operator = document.getElementById('operator'): 获取ID为"operator"的元素。
  • const calculateButton = document.getElementById('calculate-button'): 获取ID为"calculate-button"的元素。
  • const result = document.getElementById('result'): 获取ID为"result"的元素。
  • calculateButton.addEventListener('click', calculate): 为计算按钮添加一个点击事件监听器，当按钮被点击时，调用calculate函数。
  • calculate(): 定义calculate函数，该函数将在计算按钮被点击时执行。
  • const num1 = parseFloat(input1.value);: 获取第一个输入框中的值，将其转换为浮点数。
  • const num2 = parseFloat(input2.value);: 获取第二个输入框中的值，将其转换为浮点数。
  • const oper = operator.value;: 获取下拉菜单中选定的操作符。
  • if (isNaN(num1) || isNaN(num2)) { ... }: 检查输入的数字是否有效。如果num1或num2不是数字，则显示一条错误消息，并停止执行函数。
  • switch (oper) { ... }: 根据所选的操作符执行相应的算术运算。
  • result.textContent = (num1 + num2).toString(); 至 result.textContent = (num1 / num2).toString();： 执行加、减、乘、除运算并将结果设置为结果元素的文本内容。
  • result.textContent = 'Invalid operator';: 如果所选的操作符无效，则显示一条错误消息。

在这个实例中，我们使用JavaScript实现了一个简单的计算器功能。 首先，我们获取页面中的输入框、下拉菜单、按钮和结果元素。然后，我们为计算按钮添加一个点击事件监听器。当用户点击计算按钮时，会触发calculate函数。 在calculate函数中，我们首先从输入框中获取用户输入的数字。我们使用parseFloat()函数将输入转换为浮点数，然后使用isNaN()函数检查输入的数字是否有效。如果输入的数字无效，我们显示一条错误消息，并停止执行函数。

接下来，我们根据用户选择的操作符（加、减、乘、除），执行相应的算术运算。我们使用switch语句根据操作符的值选择不同的操作。

最后，我们将计算结果输出。

测试和调试应用：

打开calculator.html文件，确保页面中的样式和功能符合预期。尝试在输入框中输入数字，然后从下拉菜单中选择操作符，最后点击计算按钮。检查结果是否正确。

图.png

总结

本文章通过JS实现了一个简单的项目实例，并且通过对代码进行分析简要的讲解出如何通过JS实现一个特定的计算功能，在实际项目中的需求会难得多，我们需要根据需求来进行针对性开发。

avatar
文章
阅读
粉丝