javascript实现简易计算器的代码

下面是Javascript实现简易计算器的完整攻略：

步骤一：HTML结构

首先我们需要在HTML中创建一个计算器的基本结构，包括按钮、显示器等元素。可以参考下面的代码：

<!DOCTYPE html>
<html>
<head>
  <title>简易计算器</title>
</head>
<body>
  <div>
    <p>计算器</p>
    <input type="text" name="screen" id="screen" readonly="readonly" />
    <br />
    <input type="button" value="1" onclick="enterValue('1')" />
    <input type="button" value="2" onclick="enterValue('2')" />
    <input type="button" value="3" onclick="enterValue('3')" />
    <input type="button" value="+" onclick="enterValue('+')" />
    <br />
    <input type="button" value="4" onclick="enterValue('4')" />
    <input type="button" value="5" onclick="enterValue('5')" />
    <input type="button" value="6" onclick="enterValue('6')" />
    <input type="button" value="-" onclick="enterValue('-')" />
    <br />
    <input type="button" value="7" onclick="enterValue('7')" />
    <input type="button" value="8" onclick="enterValue('8')" />
    <input type="button" value="9" onclick="enterValue('9')" />
    <input type="button" value="*" onclick="enterValue('*')" />
    <br />
    <input type="button" value="0" onclick="enterValue('0')" />
    <input type="button" value="." onclick="enterValue('.')" />
    <input type="button" value="C" onclick="clearScreen()" />
    <input type="button" value="/" onclick="enterValue('/')" />
    <br />
    <input type="button" value="=" onclick="calculate()" />
  </div>
</body>
</html>

步骤二：CSS样式

为了让计算器有更好的视觉效果，我们需要对其进行样式设置。可以参考下面的代码：

body {
  font-size: 16px;
  background-color: #ffe8cc;
}

div {
  width: 220px;
  margin: 50px auto;
  border: 1px solid #ccc;
  padding: 10px;
  text-align: center;
}

p {
  font-size: 26px;
}

input {
  font-size: 16px;
  width: 50px;
  height: 30px;
  margin: 5px;
}

步骤三：Javascript实现逻辑

现在我们需要使用Javascript编写计算器的逻辑，如输入数字、运算符等操作以及计算结果的显示。可以参考下面的代码：

// 声明一个全局变量，用于保存当前输入的数字和运算符
var num, operator;

// 点击数字和运算符按钮时触发的函数
function enterValue(value) {
  var screen = document.getElementById("screen");

  if (screen.value == "0") {
    screen.value = value;
  } else {
    screen.value += value;
  }
}

// 清屏
function clearScreen() {
  document.getElementById("screen").value = "0";

  num = null;
  operator = null;
}

// 计算结果
function calculate() {
  var screen = document.getElementById("screen");

  if (operator == "+") {
    screen.value = parseFloat(num) + parseFloat(screen.value);
  } else if (operator == "-") {
    screen.value = parseFloat(num) - parseFloat(screen.value);
  } else if (operator == "*") {
    screen.value = parseFloat(num) * parseFloat(screen.value);
  } else if (operator == "/") {
    screen.value = parseFloat(num) / parseFloat(screen.value);
  }

  // 保存当前输入的数字和运算符
  num = screen.value;
  operator = null;
}

示范一：加法运算

假设我们现在要计算3+4的结果，那么我们需要在计算器上依次按下3、+、4、=四个按钮。按下3的按钮时，计算器屏幕上会显示数字3；接着按下+号按钮时，屏幕上会显示3+；再按下4的按钮时，屏幕上会显示3+4；最后按下=号按钮时，屏幕上会显示7，即为3+4的计算结果。

示范二：除法运算

假设我们现在要计算9/3的结果，那么我们需要在计算器上依次按下9、/、3、=四个按钮。按下9的按钮时，计算器屏幕上会显示数字9；接着按下/号按钮时，屏幕上会显示9/；再按下3的按钮时，屏幕上会显示9/3；最后按下=号按钮时，屏幕上会显示3，即为9/3的计算结果。

通过以上示例，我们可以了解到Javascript实现简易计算器的具体步骤及逻辑，希望可以帮到您！

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现简易计算器的代码 - Python技术站