如何使用JavaScript实现某个功能或解决某个问题实践 ｜ 青训营

xg
47 阅读4分钟

前言：我们知道JavaScript是一种编程语言，它可以在网页中添加交互性和动态特效。它可以用于开发各种类型的网站、应用程序和游戏。它也可以用于验证表单输入、创建动画、处理数据、交互式地修改网页内容等等。并且可以通过浏览器内置的JavaScript引擎来解释和执行代码。它是一种客户端脚本语言，意味着它在用户的浏览器中执行，而不是在服务器上执行。本文将通过一个完整的项目实例来演示如何使用JavaScript实现一个简单的计算器。该计算器可以进行加、减、乘、除四种基本运算，并且可以进行连续计算。下面将一步一步地介绍实现过程。

  1. 安装开发工具

首先需要安装一个文本编辑器，用于编写JavaScript代码。常用的文本编辑器有Sublime Text、Atom、VS Code等，这里我是用的HBuider来进行项目演示。

  1. 创建HTML文件

在HBuider中创建一个新的HTML文件，命名为calculator.html。在html文件中写入一个简单页面展示计算器的按钮表示，如图：

image.png

在上面的图片展示的代码中，我们定义了一个div元素，id为calculator，用来包含整个计算器。其中，display用来显示计算结果，clear用来清空输入，backspace用来删除上一个输入，divide、multiply、subtract、add分别代表四种基本运算，seven、eight、nine、four、five、six、one、two、three、zero、decimal分别代表数字和小数点。

  1. 创建CSS文件

在HBuider中创建一个新的CSS文件，命名为style.css。在css文件中对计算器的样式进行美化，代码如下：

body {
	font-family: Arial, sans-serif;
}
#calculator {
	width: 250px;
	margin: 50px auto;
	background-color: #eee;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
#display {
	height: 40px;
	background-color: #fff;
	text-align: right;
	padding: 5px;
	margin-bottom: 10px;
	font-size: 20px;
	border-radius: 3px;
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.button {
	width: 50px;
	height: 50px;
	background-color: #fff;
	margin: 5px;
	border-radius: 5px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
	font-size: 20px;
	cursor: pointer;
}

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

#clear {
	background-color: #f44336;
	color: #fff;
}

#backspace {
	background-color: #4CAF50;
	color: #fff;
}

#divide {
	background-color: #008CBA;
	color: #fff;
}

#multiply {
	background-color: #008CBA;
	color: #fff;
}

#subtract {
	background-color: #008CBA;
	color: #fff;
}

#add {
	background-color: #008CBA;
	color: #fff;
}

#equals {
	background-color: #4CAF50;
	color: #fff;
}
#zero {
	width: 110px;
}
#decimal {
	background-color: #ddd;
}

在上面的代码中，我们定义了一些CSS样式，用来美化计算器界面。

  1. 编写JavaScript代码

在HBuider中创建一个新的JavaScript文件，命名为script.js。在文件中写入函数代码实现计算器功能，代码如下：

var display = document.getElementById("display");
var clear = document.getElementById("clear");
var backspace = document.getElementById("backspace");
var divide = document.getElementById("divide");
var multiply = document.getElementById("multiply");
var subtract = document.getElementById("subtract");
var add = document.getElementById("add");
var equals = document.getElementById("equals");
var zero = document.getElementById("zero");
var decimal = document.getElementById("decimal");
var buttons = document.querySelectorAll(".button:not(#clear):not(#backspace):not(#divide):not(#multiply):not(#subtract):not(#add):not(#equals):not(#zero):not(#decimal)");

var currentNumber = "";
var firstNumber = "";
var operator = "";
var secondNumber = "";
var result = "";

function updateDisplay() {
	display.innerHTML = currentNumber;
}

function clearAll() {
	currentNumber = "";
	firstNumber = "";
	operator = "";
	secondNumber = "";
	result = "";
	updateDisplay();
}

function backspaceOne() {
	currentNumber = currentNumber.slice(0, -1);
	updateDisplay();
}

function setOperator(op) {
	if (currentNumber !== "") {
		firstNumber = currentNumber;
		operator = op;
		currentNumber = "";
		updateDisplay();
	}
}

function calculateResult() {
	if (currentNumber !== "") {
		secondNumber = currentNumber;
		currentNumber = "";
		switch (operator) {
			case "+":
				result = parseFloat(firstNumber) + parseFloat(secondNumber);
				break;
			case "-":
				result = parseFloat(firstNumber) - parseFloat(secondNumber);
				break;
			case "*":
				result = parseFloat(firstNumber) * parseFloat(secondNumber);
				break;
			case "/":
				result = parseFloat(firstNumber) / parseFloat(secondNumber);
				break;
		}
		firstNumber = "";
		secondNumber = "";
		operator = "";
		currentNumber = result.toString();
		updateDisplay();
	}
}

function addNumber(num) {
	if (currentNumber === "0") {
		currentNumber = num;
	} else {
		currentNumber += num;
	}
	updateDisplay();
}

function addDecimal() {
	if (currentNumber === "") {
		currentNumber = "0.";
	} else if (currentNumber.indexOf(".") === -1) {
		currentNumber += ".";
	}
	updateDisplay();
}

clear.addEventListener("click", clearAll);
backspace.addEventListener("click", backspaceOne);
divide.addEventListener("click", function() { setOperator("/"); });
multiply.addEventListener("click", function() { setOperator("*"); });
subtract.addEventListener("click", function() { setOperator("-"); });
add.addEventListener("click", function() { setOperator("+"); });
equals.addEventListener("click", calculateResult);
zero.addEventListener("click", function() { addNumber("0"); });
decimal.addEventListener("click", addDecimal);

for (var i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener("click", function() {
		addNumber(this.innerHTML);
	});
}

在上面的代码中，我们首先定义了一些变量，用来获取HTML元素和存储计算结果。然后定义了一些函数，用来更新显示、清空输入、删除上一个输入、设置运算符、计算结果、添加数字和小数点。最后，我们将这些函数绑定到相应的HTML元素上，使得用户可以通过点击按钮进行计算。

  1. 运行程序

在浏览器中打开calculator.html文件，即可看到一个简单的计算器界面。用户可以通过点击按钮进行加、减、乘、除四种基本运算，并且可以进行连续计算。例如进行2乘6乘3计算，结果为36。

image.png

总结：

本文通过一个完整的项目实例演示了如何使用JavaScript实现一个简单的计算器。在实现过程中，我们需要掌握HTML、CSS和JavaScript的基础知识，并且需要熟练运用DOM操作和事件处理。通过这个实例，我们可以更好地理解JavaScript的应用场景和语法特点，提高自己的编程能力。后面需要继续的去学习，尽量将html页面美化，将一些功能更好的展现出来。

avatar
文章
阅读
粉丝