计算器

DeeLMind大约 1 分钟

计算器

<script setup>
import { ref } from "vue";

const display = ref("0");  // 显示屏幕内容
const currentOperation = ref(null);  // 当前操作符
const previousValue = ref(null);  // 前一个值

// 清除所有输入
function clear() {
  display.value = "0";
  currentOperation.value = null;
  previousValue.value = null;
}

// 输入数字
function appendNumber(number) {
  if (display.value === "0") {
    display.value = number.toString();
  } else {
    display.value += number;
  }
}

// 设置操作符
function setOperation(operation) {
  if (currentOperation.value) calculate();
  currentOperation.value = operation;
  previousValue.value = parseFloat(display.value);
  display.value = "0";
}

// 计算结果
function calculate() {
  if (currentOperation.value && previousValue.value !== null) {
    const currentValue = parseFloat(display.value);
    switch (currentOperation.value) {
      case "+":
        display.value = (previousValue.value + currentValue).toString();
        break;
      case "-":
        display.value = (previousValue.value - currentValue).toString();
        break;
      case "*":
        display.value = (previousValue.value * currentValue).toString();
        break;
      case "/":
        display.value = currentValue !== 0 ? (previousValue.value / currentValue).toString() : "Error";
        break;
    }
    currentOperation.value = null;
    previousValue.value = null;
  }
}
</script>

<template>
  <main class="calculator-container">
    <div class="display">{{ display }}</div>
    <div class="buttons">
      <button @click="clear">C</button>
      <button @click="setOperation('/')">÷</button>
      <button @click="setOperation('*')">×</button>
      <button @click="setOperation('-')"></button>
      <button @click="appendNumber(7)">7</button>
      <button @click="appendNumber(8)">8</button>
      <button @click="appendNumber(9)">9</button>
      <button @click="setOperation('+')">+</button>
      <button @click="appendNumber(4)">4</button>
      <button @click="appendNumber(5)">5</button>
      <button @click="appendNumber(6)">6</button>
      <button @click="appendNumber(1)">1</button>
      <button @click="appendNumber(2)">2</button>
      <button @click="appendNumber(3)">3</button>
      <button class="equals" @click="calculate">=</button>
      <button @click="appendNumber(0)">0</button>
    </div>
  </main>
</template>

<style scoped>
.calculator-container {
  max-width: 300px;
  margin: auto;
  text-align: center;
}

.display {
  font-size: 2em;
  padding: 0.5em;
  background-color: #222;
  color: #fff;
  border-radius: 4px;
  margin-bottom: 1em;
}

.buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5em;
}

button {
  padding: 1em;
  font-size: 1.5em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button.equals {
  grid-column: span 2;
  background-color: #4caf50;
  color: white;
}

button:hover {
  background-color: #ddd;
}

button:active {
  background-color: #bbb;
}
</style>
上次编辑于:
贡献者: DeeLMind