HTML+CSS+JS实现计算器

news2025/1/16 3:01:32

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

课程名：HTML+CSS+JS

内容/作用：知识点/设计/实验/作业/练习

学习：HTML+CSS+JS

思路

创建HTML页面，包含数字和操作符的按钮以及一个输出框
使用CSS样式美化页面
使用JavaScript编写计算器的逻辑，通过绑定事件处理程序，实现对按钮的响应和输出结果到输出框

效果图

在这里插入图片描述

代码

HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Calculator</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="calculator">
		<div class="output">
			<input type="text" id="result" disabled>
		</div>
		<div class="btn-row">
			<button class="operator" id="clear">C</button>
			<button class="operator" id="backspace">CE</button>
			<button class="operator" id="divide">/</button>
			<button class="operator" id="multiply">*</button>
		</div>
		<div class="btn-row">
			<button class="number" id="7">7</button>
			<button class="number" id="8">8</button>
			<button class="number" id="9">9</button>
			<button class="operator" id="minus">-</button>
		</div>
		<div class="btn-row">
			<button class="number" id="4">4</button>
			<button class="number" id="5">5</button>
			<button class="number" id="6">6</button>
			<button class="operator" id="plus">+</button>
		</div>
		<div class="btn-row">
			<button class="number" id="1">1</button>
			<button class="number" id="2">2</button>
			<button class="number" id="3">3</button>
			<button class="operator" id="equals">=</button>
		</div>
		<div class="btn-row">
			<button class="number" id="0">0</button>
			<button class="operator" id="decimal">.</button>
		</div>
	</div>
	<script src="app.js"></script>
</body>
</html>

CSS:

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: Arial, sans-serif;
}

.calculator {
	margin: 50px auto;
	width: 300px;
	background-color: #eee;
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

.output {
	margin-bottom: 20px;
}

#result {
	width: 100%;
	font-size: 2em;
	text-align: right;
	padding: 5px;
	background-color: #fff;
	border: none;
	border-radius: 5px;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}

.btn-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 5px;
}

button {
	background-color: #fff;
	color: #333;
	font-size: 1.5em;
	border: none;
	border-radius: 5px;
	padding: 10px;
	width: 70px;
	height: 70px;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	cursor: pointer;
	transition: all 0.3s ease;
}

button:hover {
	background-color: #333;
	color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.number {
	background-color: #eee;
}

.operator {
	background-color: #f2a53f;
	color: #fff;
}

.btn-row:last-child button {
	width: 150px;
}

.btn-row:last-child button#decimal {
	width: 70px;
}

.btn-row:last-child button#0 {
	width: 150px;
}

JavaScript:

//获取DOM元素
const result = document.getElementById("result");
const clearBtn = document.getElementById("clear");
const backspaceBtn = document.getElementById("backspace");
const divideBtn = document.getElementById("divide");
const multiplyBtn = document.getElementById("multiply");
const minusBtn = document.getElementById("minus");
const plusBtn = document.getElementById("plus");
const equalsBtn = document.getElementById("equals");
const decimalBtn = document.getElementById("decimal");
const numberBtns = document.querySelectorAll(".number");

let currentOperation = null;
let firstOperand = null;

//添加事件监听器
clearBtn.addEventListener("click", () => {
  resetCalculator();
});

backspaceBtn.addEventListener("click", () => {
  result.value = result.value.slice(0, -1);
});

divideBtn.addEventListener("click", () => {
  setOperation("/");
});

multiplyBtn.addEventListener("click", () => {
  setOperation("*");
});

minusBtn.addEventListener("click", () => {
  setOperation("-");
});

plusBtn.addEventListener("click", () => {
  setOperation("+");
});

equalsBtn.addEventListener("click", () => {
  if (currentOperation !== null) {
    compute();
    currentOperation = null;
  }
});

decimalBtn.addEventListener("click", () => {
  if (!result.value.includes(".")) {
    result.value += ".";
  }
});

numberBtns.forEach((button) => {
  button.addEventListener("click", () => {
    if (result.value === "0") {
      result.value = button.innerText;
    } else {
      result.value += button.innerText;
    }
  });
});

//重置计算器
function resetCalculator() {
  currentOperation = null;
  firstOperand = null;
  result.value = "0";
}

//设置操作符
function setOperation(operator) {
  if (currentOperation !== null) {
    compute();
  }
  currentOperation = operator;
  firstOperand = parseFloat(result.value);
  result.value = "0";
}

//计算结果
function compute() {
  const secondOperand = parseFloat(result.value);
  let resultValue;
  switch (currentOperation) {
    case "+":
      resultValue = firstOperand + secondOperand;
      break;
    case "-":
      resultValue = firstOperand - secondOperand;
      break;
    case "*":
      resultValue = firstOperand * secondOperand;
      break;
    case "/":
      resultValue = firstOperand / secondOperand;
      break;
    default:
      return;
  }
  result.value = resultValue;
  firstOperand = resultValue;
}