2022 年使用 JavaScript、HTML 和 CSS 构建计算器

已发表: 2021-01-02

无论您是在学习新的编程语言还是开发框架，总有一天您必须从事现实世界的项目。 在学习该主题的过程中，您应该测试您的技能和对语言的理解。 使用新学习的技术或框架构建项目是一个好主意。 网上有很多关于你应该用你的知识创造什么的想法。

最常见的建议包括JavaScript 中的计算器和待办事项列表。 虽然它们看起来很容易，但当您开始从事这些项目时，这可能是一项艰巨的任务。 在这里，我们将为您提供简单、合乎逻辑和多事的信息。

我们开始吧？

目录

逻辑先于一切

当你开始做一个项目时，无论是计算器还是待办事项列表，你首先需要确定的就是逻辑。

计算器是如何工作的？

  1. 您可以使用计算器上提供的数字键添加两个或多个数字（任意位数）。
  2. 然后，您对这些数字执行基本算术功能，即加法、减法、乘法和除法。
  3. 计算器应该能够计算并给出正确的解决方案。

这是您的计算器工具的前提。 所以你需要一个键盘、一个显示单元和功能元件。

“等于”按钮将评估答案，而“清除”按钮将确保删除计算器显示屏上的所有输入。

从世界顶级大学学习在线软件开发课程。 获得行政 PG 课程、高级证书课程或硕士课程，以加快您的职业生涯。

处理项目：构建代码的关键

你需要学习如何处理一个新项目，而不是马上去看代码。 你准备好了两件事：逻辑和对前端技术的基本了解，即 JavaScript、HTML 和 CSS。

在开始使用 JavaScript 构建计算器之前，您需要以下内容：

  1. 一个集成开发环境，可帮助您使用所有三种技术构建项目。
  2. 一个本地服务器，可以帮助您测试代码并消除错误。 因此，您将能够更快、更敏捷地启动应用程序。

#1 HTML 入门

第一步是让你的手稍微弄脏 HTML，这样你就已经为你的计算器构建了大纲。

计算器上有十个按钮，范围从 0 到 9。HTML 负责为每个数字构建键。

除此之外，在使用 JavaScript 构建计算器时，您还需要使用 HTML 为不同的算术函数创建单独的键。

您可以使用 HTML 添加按钮以显示输入的数字或结果以及清除显示。

计算器的视觉单元完全依赖于 HTML 和 CSS，其中的按钮及其 ID 需要使用 HTML 创建。

样板代码

<!DOCTYPE html>

<html lang=”en”>

<头部>

<元字符集=”UTF-8″>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<link rel=”stylesheet” type=”text/css” href=”css/styles.css”>

<title>计算器</title>

</head>

<正文>

创建计算器轮廓的实际代码

(

<!– 计算器–>

<div 类=”计算器”>

<!--显示-->

<input type=”text” class=”display” disabled>

<!– 键–>

<div class=”keys”>

<!– 4 行键 –>

<div 类=“行”>

<button value="7″>7</button>

<button value="8″>8</button>

<button value="9″>9</button>

<button value=”+” class=”operator”>+</button>

</div>

<div 类=“行”>

<button value=”4″>4</button>

<button value="5″>5</button>

<button value="6″>6</button>

<button value=”-” class=”operator”>-</button>

</div>

<div 类=“行”>

<button value=”1″>1</button>

<按钮值=”2″>2</button>

<button value=”3″>3</button>

<button value=”*” class=”operator”>*</button>

</div>

<div 类=“行”>

<button value=”C” class=”operator”>C</button>

<button value=”0″>0</button>

<button value=”/” class=”operator”>/</button>

<button value=”=” class=”operator”>=</button>

</div>

</div>

</div>

<!– 计算器主体结束–>

<script type=”text/javascript” src=”js/script.js”></script>

</正文>

</html>

学习： Github 中最适合初学者的 20 个 Javascript 项目

#2 样式与 CSS

一旦定义了计算器的结构，您将使用内联 CSS 元素来为您的计算器设置样式，并使其具有视觉吸引力且易于使用。

虽然内联 CSS 在设计和设置应用外观样式方面非常出色，但它可能对 SEO 不友好。 除此之外，您还可以通过将外部 CSS 元素标记到相同的根目录来使用它们。 您甚至可以使用 head 部分的 <style></style> 标记中存在的内部或嵌入式 CSS 元素。

在这里，我们将带您了解可用于设置计算器样式的代码。

（如果需要，您可以创建此代码的变体。）

/* 常用样式 */

* {

填充：0；

边距：0；

}

身体 {

宽度：100vw；

高度：100vh；

溢出：隐藏；

显示：弯曲；

证明内容：中心；

对齐项目：居中；

背景颜色：#222831；

字体系列：无衬线；

}

/* 常用样式结束 */

/* 计算器 */

.计算器{

宽度：300px；

底部填充：15px；

边框半径：7px；

背景颜色：#000；

盒子阴影：5px 8px 8px -2px rgba(0, 0, 0, 0.61);

}

/* 计算器样式结束 */

/* 展示 */

。展示 {

宽度：100%；

高度：80px；

边框：无；

box-sizing：边框框；

填充：10px；

字体大小：2rem；

背景颜色：#00ff44；

颜色：#000；

文本对齐：右；

边框左上角半径：7px；

边框右上角半径：7px；

}

/* 显示样式结束 */

/* 排 */

。排 {

显示：弯曲；

justify-content: 之间的空格；

}

/* 行样式结束 */

/* 按钮 */

按钮 {

宽度：50px；

高度：50px；

边界半径：50%；

边框：无；

大纲：无；

字体大小：1.5rem；

背景颜色：#222；

颜色：#fff;

边距：10px；

}

按钮：悬停{

光标：指针；

}

/* 按钮样式结束 */

/* 操作员 */

。操作员 {

背景颜色：#00ff44；

颜色：#000；

}

/* 运算符风格结束 */

#3 使用 JavaScript 添加功能

我们现在已经详细讨论了使用 JavaScript 构建计算器的可见方面。 让我们编写一些脚本来帮助使计算器正常工作并执行计算任务。 我们将了解构建 JS 代码所涉及的几个步骤，这将帮助您更快地开发代码。

  • 您将需要使用 JavaScript 调用您为各个函数创建的 HTML 标记。 您将使用选择器来调用这些输入中的每一个并将它们存储在一个变量中。 对于每个函数，您都需要一个变量。 例如，有一个单独的变量用于显示、数字、清除函数以及等于函数。 在这种情况下可以使用 getElementbyID() 函数。
  • 假设您要执行一个简单的 20+30 计算，您将首先使用上面提到的方法调用 20。 在调用 30 和算术函数之前，您需要将之前调用的 20 存储在某处。 您的代码应该为临时存储数字腾出空间，以便于计算。 一个空数组会将数字保存为字符串。 一旦你添加了另一个数字和算术函数，使用 eval()，你可以计算数字并得到答案。
  • 当您单击计算器中的按钮时，您想要一些结果，或者显示它们，或者对它们进行评估。 为此，您应该将事件侦听器添加到您的代码中。 这样，按钮将听取点击。 当您向事件侦听器添加函数时，它们将自动执行单击声音的任务。
  • 显示单元应返回您单击的按钮的值。 您可以使用 event.target 对象，因为它将返回发生事件的元素的值。 例如，您希望在单击数字“1”时立即显示它。 为此，您需要以变量的形式存储数字。 使用“if”函数，您将比较现有变量以确定它是否为零。 如果它是零，那么您将把它附加到一个空字符串中，这样任何数字都不会以零开头。 最后，将键“1”的内容添加到显示变量中。 结果，只要触发数字键，您就会看到显示框中的内容。
  • 最后，您需要创建有助于将数学运算应用于显示数字的函数。 确保您的 JavaScript计算器可以轻松执行数学计算。 要启用此功能，您可以使用语法和方法的组合。 我们已指定以下 JavaScript 元素的代码供您阅读。

//选择所有按钮

常量按钮 = document.querySelectorAll('button');

// 选择 <input type=”text” class=”display” disabled> 元素

const display = document.querySelector('.display');

// 为每个按钮添加事件监听器

button.forEach（功能（按钮）{

button.addEventListener('点击'，计算);

});

//计算函数

函数计算（事件）{

// 当前点击的按钮值

常量 clickedButtonValue = event.target.value;

if (clickedButtonValue === '=') {

// 检查显示是否为空然后只进行计算

if (display.value !== ”) {

// 计算并显示答案

display.value = eval(display.value);

}

} else if (clickedButtonValue === 'C') {

// 清除显示的所有内容

显示值=”；

} 别的 {

// 否则将其连接到显示器

display.value += clickedButtonValue;

}

}

必读： Java 架构和组件解释

加起来

无论您是使用 JavaScript 构建计算器还是从事更复杂的项目，我们的想法都是以合乎逻辑和可解释的方式分解内容。 这将帮助您获得准确的语法，并生成流畅的 Web 应用程序。 与其直接从编码开始，不如尝试了解您使用的技术的真正目的是什么，它将引导您找到代码。

如果您有兴趣了解有关 Java、全栈软件开发的更多信息，请查看 upGrad 和 IIIT-B 的软件开发执行 PG 计划——全栈开发专业化，专为工作专业人士设计，提供 500 多个小时的严格培训, 9+ 项目和任务，IIIT-B 校友身份，实用的实践顶点项目和顶级公司的工作协助。

踏上梦想的工作

申请 upGrad 的软件工程与工作相关的 PG 认证