正文

如何用JavaScript制作一个简单的计算器页面设计图

/0 浏览量
0821

在这个数字化时代，计算器是一个极其常见的工具。虽然我们通常使用手机或电脑自带的计算器，但自己动手制作一个简单的计算器页面也是一个非常有意思的编程练习。下面，我将带你一步步用JavaScript制作一个简单的计算器页面。

1. 设计计算器界面

首先，我们需要设计计算器的界面。一个典型的计算器界面通常包括以下部分：

  • 显示屏（通常是一个文本框）
  • 数字键（0-9）
  • 运算符键（+、-、*、/）
  • 清除键（C）
  • 等于键（=）

我们可以使用HTML和CSS来设计这个界面。

HTML结构

<div id="calculator">
  <input type="text" id="display" disabled>
  <div id="buttons">
    <button onclick="appendNumber('1')">1</button>
    <button onclick="appendNumber('2')">2</button>
    <button onclick="appendNumber('3')">3</button>
    <button onclick="setOperator('+')">+</button>
    <button onclick="clearDisplay()">C</button>
    <button onclick="appendNumber('4')">4</button>
    <button onclick="appendNumber('5')">5</button>
    <button onclick="appendNumber('6')">6</button>
    <button onclick="setOperator('-')">-</button>
    <button onclick="calculate()">=</button>
    <button onclick="appendNumber('7')">7</button>
    <button onclick="appendNumber('8')">8</button>
    <button onclick="appendNumber('9')">9</button>
    <button onclick="setOperator('*')">*</button>
    <button onclick="appendNumber('0')">0</button>
    <button onclick="setOperator('/')">/</button>
  </div>
</div>

CSS样式

#calculator {
  width: 300px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 10px;
}

#display {
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  text-align: right;
}

#buttons button {
  width: 25%;
  padding: 10px;
  margin: 5px;
}

2. 编写JavaScript代码

接下来，我们需要编写JavaScript代码来实现计算器的功能。

JavaScript代码

let currentInput = '';
let operator = '';
let previousInput = '';

function appendNumber(number) {
  currentInput += number;
  updateDisplay();
}

function setOperator(op) {
  if (currentInput === '') return;
  if (operator !== '') calculate();
  operator = op;
  previousInput = currentInput;
  currentInput = '';
  updateDisplay();
}

function clearDisplay() {
  currentInput = '';
  operator = '';
  previousInput = '';
  updateDisplay();
}

function calculate() {
  const result = eval(previousInput + operator + currentInput);
  currentInput = result.toString();
  operator = '';
  updateDisplay();
}

function updateDisplay() {
  document.getElementById('display').value = currentInput;
}

3. 运行和测试

将HTML、CSS和JavaScript代码保存到一个文件中，并在浏览器中打开该文件。你应该能看到一个简单的计算器界面，并且可以正常使用它进行计算。

通过这个简单的例子，你学会了如何用JavaScript制作一个计算器页面。当然，这只是一个入门级的例子，你可以根据自己的需求对其进行扩展和改进。

-- 展开阅读全文 --