使用JavaScript实现一个简单的计算器 | 青训营

热爱编程的小梁
139 阅读5分钟

HTML代码段：

通过HTML来把界面端计算器的按钮给展示出来，并且给它们都用onclick添加上事件，同时在div标签中利用button-grid容器将这些按钮装起来，后面再引入CSS文件和JavaScript文件

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>一个简单的计算器</title>
	<link rel="stylesheet" type="text/css" href="test.css">//引入css文件
</head>
<body>
	<h1>计算器</h1>
	<div class="calculator">
		<input type="text" id="input" class="input" placeholder="0">
		<div class="button-grid">
			<input type="button" value="1" class="button" onclick="addNumber(1)">
			<input type="button" value="2" class="button" onclick="addNumber(2)">
			<input type="button" value="3" class="button" onclick="addNumber(3)">
			<input type="button" value="+" class="button" onclick="addOperator('+')">
			<input type="button" value="4" class="button" onclick="addNumber(4)">
			<input type="button" value="5" class="button" onclick="addNumber(5)">
			<input type="button" value="6" class="button" onclick="addNumber(6)">
			<input type="button" value="-" class="button" onclick="addOperator('-')">
			<input type="button" value="7" class="button" onclick="addNumber(7)">
			<input type="button" value="8" class="button" onclick="addNumber(8)">
			<input type="button" value="9" class="button" onclick="addNumber(9)">
			<input type="button" value="*" class="button" onclick="addOperator('*')">
			<input type="button" value="0" class="button" onclick="addNumber(0)">
			<input type="button" value="." class="button" onclick="addDecimal()">
			<input type="button" value="=" class="button" onclick="calculate()">
			<input type="button" value="/" class="button" onclick="addOperator('/')">
		</div>
		<p id="output"></p>
	</div>
	<script src="test.js"></script>//引入js文件
</body>
</html>

CSS代码段:

利用CSS来美化计算器的样式

body {
	background-color: #f1f1f1;
	font-family: Arial, sans-serif;
}

h1 {
	text-align: center;
	color: #333;
}

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

.input {
	width: 100%;
	height: 40px;
	font-size: 18px;
	padding: 5px;
	border: none;
	border-radius: 5px;
	margin-bottom: 10px;
	text-align: right;
}

.button-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-gap: 5px;
}

.button {
	width: 100%;
	height: 40px;
	font-size: 18px;
	border: none;
	border-radius: 5px;
	background-color: #4CAF50;
	color: #fff;
}

.button:hover {
	background-color: #45a049;
	cursor: pointer;
}

#output {
	text-align: right;
	font-size: 24px;
	margin-top: 10px;
	padding: 5px;
	background-color: #eee;
	border-radius: 5px;
}

JavaScript代码段：

JavaScript这里是最重要的，为了实现它的功能，我们需要把计算的函数以及方法写在JavaScript里面，类似于我们Java中的方法体，同时每段代码的表示的意义我都已注释好，与java一样方便让人理解代码

我主要分成了下面七个步骤：

  1. 首先，通过获取输入框和输出框的元素，将其分别赋值给变量input和output。
  2. 定义了三个变量num1、num2和operator，用于存储用户输入的数字和操作符。
  3. addNumber函数用于添加数字。如果当前没有操作符，数字将被添加到num1中；如果当前有操作符，数字将被添加到num2中。
  4. addDecimal函数用于添加小数点。如果当前没有操作符，将小数点添加到num1中；如果当前有操作符，将小数点添加到num2中。
  5. addOperator函数用于添加操作符。如果当前没有操作符，将操作符添加到operator中，并清空输入框；如果当前有操作符，先计算结果，然后将操作符设置为新的操作符。
  6. calculate函数用于计算结果。根据当前操作符，对num1和num2进行相应的计算，并将结果显示在输出框中。
  7. 最后，通过重置变量和清空输入框，准备进行下一次计算。 我通过这段代码就可以实现了一个简单的计算器功能，用户可以输入数字和操作符进行计算，并得到结果显示在输出框中。
// 获取输入框和输出框元素
var input = document.getElementById("input");
var output = document.getElementById("output");

// 定义变量来存储用户输入的数字和操作符
var num1 = 0;
var num2 = 0;
var operator = "";

// 添加数字
function addNumber(num) {
	// 如果当前没有操作符，则将数字添加到num1中
	if (operator === "") {
		num1 = num1 * 10 + num;
		input.value = num1;
	}
	// 否则将数字添加到num2中
	else {
		num2 = num2 * 10 + num;
		input.value = num2;
	}
}

// 添加小数点
function addDecimal() {
	// 如果当前没有操作符，则将小数点添加到num1中
	if (operator === "") {
		if (input.value.indexOf(".") === -1) {
			input.value += ".";
		}
	}
	// 否则将小数点添加到num2中
	else {
		if (input.value.indexOf(".", num1.toString().length) === -1) {
			input.value += ".";
		}
	}
}

// 添加操作符
function addOperator(op) {
	// 如果当前没有操作符，则将操作符添加到operator中
	if (operator === "") {
		operator = op;
		input.value = "";
	}
	// 否则将计算结果并将操作符设置为新的操作符
	else {
		calculate();
		operator = op;
	}
}

// 计算结果
function calculate() {
	// 根据当前操作符计算结果
	switch (operator) {
		case "+":
			num1 += num2;
			break;
		case "-":
			num1 -= num2;
			break;
		case "*":
			num1 *= num2;
			break;
		case "/":
			num1 /= num2;
			break;
	}
	
	// 显示结果
	output.innerHTML = num1;
	
	// 重置变量
	num2 = 0;
	operator = "";
	input.value = "";
}

效果图如下所示：

下面这个图就实现一个基本计算器的功能，包括最简单的加减乘除，运算出来的结果放到下面来显示，这只是其中的一个小插件，在后续我们写一个比较大的项目的时候，我们可以利用多个HTML之间的跳换来进行交互，后续也会用到HTML中重定向的方法。 image.png

总结： 作为一个前端基础小白，通过利用这段代码实现了一个简单的计算器功能，让我对前端开发有了初步的认识和实践。 在学习过程中，我了解到HTML是用来构建网页结构的标记语言。通过使用不同的标签，我可以创建各种元素，如标题、输入框、按钮和输出框等。可以通过HTML将自己的想法转化为可见的网页内容。此外利用CSS样式表，通过为HTML元素添加样式，我可以改变它们的外观和布局。在这段代码中，通过引入一个名为"test.css"的样式表文件，我可以轻松地为计算器界面添加样式，使其看起来更加美观和易于操作。 在JavaScript方面，我发现它是一种强大的编程语言，用于实现网页的交互和动态性，这是一门弱类型语言，它的要求不像java那样严格。通过编写JavaScript代码，我可以对用户的输入做出响应，并进行相应的计算和逻辑处理。这段代码中的JavaScript函数，如addNumber、addOperator和calculate，让我可以处理用户的输入，并根据输入执行相应的操作。通过这段代码的编写，我学到了如何使用JavaScript来操作HTML元素，如获取输入框和输出框的值，以及如何通过设置这些值来更新页面的显示。我还了解到了JavaScr 总的来说，我对前端开发有了更进一步的了解。尽管这只是一个简单的计算器，但通过编写这段代码，我感受到了前端开发的乐趣，期待在未来的学习中能够进一步提升自己的技能，并创造出更加复杂和有趣的网页应用。 大家一起加油！

avatar
文章
阅读
粉丝