首页 > 文章 > web前端 > 构建一个简单的基于 Web 的计算器：使用 Html CSS 和 JavaScript 分步 Guild

构建一个简单的基于 Web 的计算器：使用 Html CSS 和 JavaScript 分步 Guild

Patricia Arquette原创: 2024-11-11 14:20:02537浏览

BUILDING A SIMPLE WEB-BASED CALCULATOR: Step-by-step Guild with Html CSS And JavaScript

创建计算器 Web 应用程序是学习 HTML、CSS 和 JavaScript 的绝佳项目。尽管计算器很常见或相当普通，但从头开始构建计算器可以帮助初学者理解 Web 开发的基本概念，例如使用 HTML 构建内容、使用 CSS 设置元素样式以及使用 JavaScript 添加交互功能。

在本概述中，我们将逐步介绍创建功能齐全的计算器所需的代码的每个部分。本指南不仅提供代码，还将详细解释每一行，确保您了解所有内容如何组合在一起。到本项目结束时，您将拥有一个流畅的交互式计算器，您可以对其进行个性化设置，甚至可以使用更高级的功能进行扩展。

计算器的功能
该计算器包括基本功能：

显示当前输入和结果的显示区域。

数字按钮 (0–9) 和一个附加的“00”按钮。

算术运算按钮：加法( )、减法(-)、乘法(*)、除法(/)。

特殊按钮：

AC 清除当前输入。
DEL 删除最后一个字符。
/- 在正数和负数之间切换。
= 计算表达式并显示结果。

通过这个项目，您将学习如何：

使用 HTML 创建用户界面。
使用 CSS 设计元素以提高视觉吸引力。
使用 JavaScript 实现计算器逻辑来处理按钮
交互并执行计算。

第 1 步：HTML 结构 - 构建计算器的布局

HTML 代码为我们的计算器提供了基础结构。在这一部分中，我们定义了构成计算器的元素，例如按钮和显示区域，您可以使用您选择的任何编辑器来实现此效果，我个人更喜欢 Visual studio 代码。以下是计算器的完整 HTML 代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>



<p>Explanation</p>

<p>Document Type and Language Declaration:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>

告诉浏览器这是一个 HTML5 文档。

<html lang="en">

开始 HTML 文档并指定英语作为语言。这有助于搜索引擎和屏幕阅读器理解文档的语言。

头部：

<head>

包含对文档很重要但用户不可见的元数据和链接。

<meta charset="UTF-8">

设置字符编码，确保与大多数语言兼容。

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

通过调整页面布局以适应不同的设备，使页面具有响应能力。

<title>Calculator</title>

设置浏览器选项卡上显示的标题。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>



<p>Explanation</p>

<p>Document Type and Language Declaration:<br>
</p>

<pre class="brush:php;toolbar:false"><!DOCTYPE html>

指向定义样式的 CSS 文件的链接。

计算器布局：

<html lang="en">

指向处理计算器功能的 JavaScript 文件的链接。

第 2 步：CSS 样式 - 设计计算器界面

现在我们有了结构，让我们开始设计样式。此 CSS 代码将使计算器看起来更现代，添加颜色、圆形按钮、阴影和响应式布局调整。

<head>

说明

基本重置和字体：

<meta charset="UTF-8">

删除默认的填充和边距，将 box-sizing 设置为 border-box 以保持大小一致，并应用现代字体。

身体造型：

body：使用 Flexbox 将计算器容器置于屏幕中央并应用渐变背景。

计算器容器：

.calculator：添加内边距、圆角和阴影，打造整洁的卡片式外观。

显示输入：

输入：这种样式为显示区域提供了大字体和右对齐，类似于真正的计算器显示。

按钮样式：

.计算器按钮：设置带有阴影效果、白色文本颜色和对齐间距的圆形按钮。

.actionbtn、.clearbtn 和 .enter：特定按钮的样式，使它们脱颖而出（例如，绿色表示运算符，红色表示清除，橙色表示等于）。

第 3 步：这是所有 JavaScript 逻辑发生的地方 - 使计算器发挥作用

结构和风格都已完成，让我们使用 JavaScript 添加功能。该脚本允许我们处理按钮的点击、执行算术并显示结果。

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

说明

页面加载事件监听器：

<title>Calculator</title>

确保脚本在加载所有 HTML 内容后运行。

输入和按钮变量：

<link rel="stylesheet" href="style.css">

选择显示区域。

<div>



<p>Wraps the entire calculator interface. We’ll apply styles to this container to make it look like a calculator.<br>
</p>

<pre class="brush:php;toolbar:false"><input type="text" placeholder="0">



<p>This is the display area of the calculator, where we show the current number or result. It is disabled, so users can’t type directly.</p>

<p>Buttons:<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Clears the calculator display and resets the current calculation.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Deletes the last entered character.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>Toggles between positive and negative values.<br>
</p>

<pre class="brush:php;toolbar:false"><button>



<p>The division operator.</p>

<p>Remaining button elements represent numbers (0–9), operators (+, -, *, /), and a decimal point (.). The = button (class="enter") is used to evaluate the expression.</p>

<p>JavaScript File:<br>
</p>

<pre class="brush:php;toolbar:false"><script src="script.js"></script>

将所有按钮收集在一个数组中以便于操作。

按钮点击事件：

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}
body{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(45deg, #0a0a0a, #3a4452);
}
.calculator{
    border: 1px solid #a2a2a2;
    padding: 20px;
    border-radius: 20px;
    background: transparent;
    box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
}
input{
    width: 272px;
    min-height: 100px;
    border: none;  
    padding: 5px;
    margin: 10px;
    background: transparent;
    font-size: 40px;
    text-align: right;
    cursor: text;
    outline: none;
    color: #fff;
}
input::placeholder{
    color: #fff;
}
.calculator button{
    width: 50px;
    height: 50px;
    margin: 10px;
    border-radius: 50%;
    border: none;
    box-shadow: -5px 3px 10px rgba(9, 9, 9, 0.5);
    background: transparent;
    color: #fff;
    cursor: pointer;
    outline: none;
}
.calculator .actionbtn{
    color: #1afe17;
}
.calculator .clearbtn{
    background: #f31d1f;
}
.calculator .enter{
    background: #f5881a;
}

为每个按钮添加点击事件。根据按钮的不同，执行不同的操作：

显示字体大小调整：当输入长度超过 10 个字符时缩小字体大小。

等号 (=)：使用 eval() 计算表达式并显示结果。如果出现错误（例如无效语法），则会显示“错误”。

清除 (AC)：重置字符串并清除显示。

删除 (DEL)：从字符串中删除最后一个字符并更新显示。

数字和运算符按钮：将按钮的值添加到字符串并更新显示。

切换符号 ( /-):

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

将当前数字乘以 -1 以在正值和负值之间切换。

最后，使用 HTML、CSS 和 JavaScript 构建一个简单但功能强大的计算器 Web 应用程序对于初学者和经验丰富的开发人员来说都是一个很棒的项目。通过仔细结合 HTML 提供的结构基础、CSS 赋予的风格元素以及 JavaScript 提供的交互功能，我们可以创建一个直观的工具，它不仅能满足其主要目的，还能演示核心 Web 开发概念。

此外，该项目为进一步探索和增强开辟了广泛的可能性。这里吸取的经验教训为更复杂的项目提供了全面的基础。 Web 开发是一个持续的学习过程，该项目展示了每一行代码如何为功能性、引人入胜的体验做出贡献。

随着您不断提高自己的技能，请考虑如何使这个计算器更加用户友好和强大。尝试不同的布局，尝试实现额外的数学函数。您所做的每一次更改都会加深您对编码原则的理解并增强您的开发资源。

编码快乐！

以上是构建一个简单的基于 Web 的计算器：使用 Html CSS 和 JavaScript 分步 Guild的详细内容。更多信息请关注PHP中文网其他相关文章！

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：How to Avoid CSS Specificity Conflicts When Using Media Queries with min-width?下一篇：Is it Valid to Use Paragraph Elements Inside Header Tags in HTML5?

查看更多