如何使用 HTML、CSS 和 JavaScript 构建一个简单的计算器

学习 JavaScript 的最好方法是构建项目。如果您想成为一名优秀的 Web 开发人员,则需要尽快开始创建。您可以从构建初级项目开始,例如简单的计算器、数字时钟、秒表等。

在本文中,您将学习如何使用 HTML、CSS 和 JavaScript 制作一个简单的计算器。该计算器可以执行基本的数学运算,如加法、减法、乘法和除法。

让我们开始吧。

计算器的组成部分

计算器由以下组件组成:

数学运算符:加法 (+)、减法 (-)、乘法 (*) 和除法 (/)。

数字和十进制按钮: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, . .

显示屏:显示数学表达式和结果。

清除屏幕按钮:清除所有数学值。

计算按钮 (=) :它计算数学表达式并返回结果。

计算器项目的文件夹结构

创建一个包含 HTML、CSS 和 JavaScript 文件的根文件夹。您可以随意命名文件。这里的根文件夹名为Calculator 。根据标准命名约定,HTML、CSS 和 JavaScript 文件分别命名为index.htmlstyles.cssscript.js

HTML代码

打开index.html文件并粘贴以下代码:

相关:了解基本 HTML 代码的步骤

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title> Simple Calculator using HTML, CSS and JavaScript </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table class = "calculator" >
<tr>
<td colspan = "3"> <input class = "display-box" type = "text" id = "result" disabled /> </td>
<!-- clearScreen() function clear all the values -->
<td> <input class = "button" type = "button" value = "C" onclick = "clearScreen()" style = "background-color: #fb0066;" /> </td>
</tr>
<tr>
<!-- display() function display the value of clicked button -->
<td> <input class = "button" type = "button" value = "1" onclick = "display('1')" /> </td>
<td> <input class = "button" type = "button" value = "2" onclick = "display('2')" /> </td>
<td> <input class = "button" type = "button" value = "3" onclick = "display('3')" /> </td>
<td> <input class = "button" type = "button" value = "/" onclick = "display('/')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "4" onclick = "display('4')" /> </td>
<td> <input class = "button" type = "button" value = "5" onclick = "display('5')" /> </td>
<td> <input class = "button" type = "button" value = "6" onclick = "display('6')" /> </td>
<td> <input class = "button" type = "button" value = "-" onclick = "display('-')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "7" onclick = "display('7')" /> </td>
<td> <input class = "button" type = "button" value = "8" onclick = "display('8')" /> </td>
<td> <input class = "button" type = "button" value = "9" onclick = "display('9')" /> </td>
<td> <input class = "button" type = "button" value = "+" onclick = "display('+')" /> </td>
</tr>
<tr>
<td> <input class = "button" type = "button" value = "." onclick = "display('.')" /> </td>
<td> <input class = "button" type = "button" value = "0" onclick = "display('0')" /> </td>
<!-- calculate() function evaluate the mathematical expression -->
<td> <input class = "button" type = "button" value = "=" onclick = "calculate()" style = "background-color: #fb0066;" /> </td>
<td> <input class = "button" type = "button" value = "*" onclick = "display('*')" /> </td>
</tr>
</table>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

计算器的结构是使用<table>标签创建的。 <table>标签包含五行,代表计算器的五个水平部分。每行都是使用<tr>标签创建的。每个<tr>标签都包含<td>标签(表格数据),其中包含计算器的显示屏和按钮。

CSS 代码

打开styles.css文件并粘贴以下代码:

相关:您可以在 10 分钟内学会的简单 CSS 代码示例

@import url('https://fonts.googleapis.com/css2?family=Orbitron&display=swap');
.calculator {
padding: 10px;
border-radius: 1em;
height: 380px;
width: 400px;
margin: auto;
background-color: #191b28;
box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.display-box {
font-family: 'Orbitron', sans-serif;
background-color: #dcdbe1;
border: solid black 0.5px;
color: black;
border-radius: 5px;
width: 100%;
height: 65%;
}
.button {
font-family: 'Orbitron', sans-serif;
background-color: #64278f;
color: white;
border: solid black 0.5px;
width: 100%;
border-radius: 5px;
height: 70%;
outline: none;
}
.button:active {
background: #e5e5e5;
-webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
-moz-box-shadow: inset 0px 0px 5px #c1c1c1;
box-shadow: inset 0px 0px 5px #c1c1c1;
}

上面的 CSS 用于设置计算器的样式。 .class选择器用于选择具有特定类属性的元素。 .calculator.display-box.button类选择器分别用于为计算器的表格结构、显示屏和按钮设置样式。 @import用于从 Google 字体导入Orbitron 字体系列

相关:如何使用 CSS box-shadow:技巧和例子

JavaScript 代码

打开script.js文件并粘贴以下代码:

 // This function clear all the values
function clearScreen() {
document.getElementById("result").value = "";
}

// This function display values
function display(value) {
document.getElementById("result").value += value;
}
// This function evaluates the expression and return result
function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

理解 JavaScript 代码

clearScreen()display()calculate()函数用于向计算器添加功能。

清除值

clearScreen()函数使用结果的 id 访问 DOM,并通过为其分配一个空字符串来清除其值。

 function clearScreen() {
document.getElementById("result").value = "";
}

显示值

display()函数使用结果的 id 访问 DOM,并将单击的按钮的值附加到结果中。

 function display(value) {
document.getElementById("result").value += value;
}

评估表达式

calculate()函数使用结果的 id 访问 DOM,并使用eval()函数评估表达式。表达式的计算值再次分配给结果。

注意eval()函数在 JavaScript 中用于计算作为参数传递给它的表达式。它返回数学表达式的计算结果。

 function calculate() {
var p = document.getElementById("result").value;
var q = eval(p);
document.getElementById("result").value = q;
}

如果您想查看本文中使用的完整源代码,请访问GitHub 存储库。另外,如果您想查看此项目的实时版本,也可以通过 GitHub进行查看。

相关:适合初学者的Python项目思路

开发酷编程项目

您可以通过开发项目将您的工程技能提升到一个新的水平。无论您是初学者还是休息一段时间后重新开始编码,开发项目都可以极大地帮助您增强信心。

您可以尝试许多简单的项目,例如国际象棋游戏、待办事项列表应用程序、重量转换工具、井字游戏、剪刀石头布游戏、Python 网页爬虫、登录系统、聊天机器人、贪吃蛇游戏、俄罗斯方块游戏、小费计算器、倒计时时钟、URL 缩短器等。

接触这些项目,成为更好的开发人员。