关键词

JavaScript计算器网页版实现代码分享

JavaScript计算器是一个常见的前端项目,本攻略旨在分享JavaScript计算器的网页版实现代码,以下是详细步骤:

步骤1:创建基本的网页结构

首先,我们需要创建一个基本的HTML网页结构,添加一些基本的元素,如标题、输入框和按钮。通过以下代码实现:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JavaScript计算器</title>
</head>
<body>
    <h1>JavaScript计算器</h1>
    <input type="text" id="result" readonly>
    <br><br>
    <button onclick="buttonPressed('1')">1</button>
    <button onclick="buttonPressed('2')">2</button>
    <button onclick="buttonPressed('3')">3</button>
    <button onclick="buttonPressed('+')">+</button>
    <br>
    <button onclick="buttonPressed('4')">4</button>
    <button onclick="buttonPressed('5')">5</button>
    <button onclick="buttonPressed('6')">6</button>
    <button onclick="buttonPressed('-')">-</button>
    <br>
    <button onclick="buttonPressed('7')">7</button>
    <button onclick="buttonPressed('8')">8</button>
    <button onclick="buttonPressed('9')">9</button>
    <button onclick="buttonPressed('*')">*</button>
    <br>
    <button onclick="buttonPressed('.')">.</button>
    <button onclick="buttonPressed('0')">0</button>
    <button onclick="buttonPressed('=')">=</button>
    <button onclick="buttonPressed('/')">/</button>
    <br>
    <button onclick="buttonPressed('Clear')">Clear</button> 
</body>
</html>

步骤2:编写JavaScript代码

接下来,我们需要为输入的数字、运算符和按钮添加相应的JavaScript代码。通过以下代码实现:

var input1 = "", //纪录第一个操作数
     operator = "", // 纪录运算符
     displayResult = document.getElementById("result");

function buttonPressed(data) {
  if (isNaN(data) && data != "." && data != "+" && data != "-" && data != "*" && data != "/" && data != "Clear" && data != "=") {
    alert("Invalid Operation");
  }

  else {
    if (data == "Clear")
      clearDisplay();
    else if (data == "=") 
      calculateResult();
    else if (isNaN(data))
      operator = data;
    else //若输入的是数字,那么每次把输入的数字接在后面,并在屏幕上显示出来
      displayResult.value += data;
  }
}

function clearDisplay() { //清空输入
  input1 = "";
  operator = "";
  displayResult.value = "";
}

function calculateResult() { //根据运算符计算结果,并在屏幕上显示
  var input2 = displayResult.value;
  var result;

  if (operator == "+")
    result = parseFloat(input1) + parseFloat(input2);
  else if (operator == "-")
    result = parseFloat(input1) - parseFloat(input2);
  else if (operator == "*")
    result = parseFloat(input1) * parseFloat(input2);
  else if (operator == "/")
    result = parseFloat(input1) / parseFloat(input2);

  displayResult.value = result;
  input1 = "";
  operator = "";
}

步骤3:测试

我们可以在浏览器中打开此HTML文件,测试JavaScript计算器代码的实现。在输入框中输入数字并单击操作符按钮,即可进行计算。当我们单击“Clear”按钮时,输入框会被清空,重新开始另一次计算。

例如,我们可以在输入框中依次输入“2 + 2 =”,在输入框中将显示结果“4”。

示例说明

以下是2个示例说明:

示例1

在输入框中输入“12 + 5 =”,结果显示为“17”。

示例2

在输入框中输入“8 / 2 =”,结果显示为“4”。

本文链接:http://task.lmcjl.com/news/9944.html

展开阅读全文