使用JavaScript和HTML实现一个精美的计算器

更新时间：2023年09月20日 09:26:35 作者：黑夜开发者

计算器是我们日常生活中经常使用的工具之一,可以帮助我们进行简单的数学运算,在本博文中,我将使用JavaScript编写一个漂亮的计算器,并添加加减乘除功能,感兴趣的同学可以自己动手尝试一下

一、前言

计算器是我们日常生活中经常使用的工具之一，可以帮助我们进行简单的数学运算。在本博文中，我将使用JavaScript编写一个漂亮的计算器，并添加加减乘除功能。这个计算器将有一个精美的用户界面，包含9个数字按钮和加减乘除操作符。

二、技术栈

HTML：负责构建界面
CSS：负责美化界面
JavaScript：负责实现计算器的逻辑

三、功能实现

3.1 引入样式

在开始编写代码之前，我们需要准备一些资源，包括一些图标和字体库。我们可以在网上找到一些开源的资源来使用。在这里，我使用了FontAwesome图标库和Google Fonts字体库。

首先，在HTML文件中引入FontAwesome图标库和Google Fonts字体库的链接：

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="external nofollow"  integrity="sha512-mvHonSS8g/k1XO4z16sWsZUfrVjPDWcTYTLnm79aJMdN5rSTQhq2ShsVlCHJfFMZML3eCG6v8kHouUqimtCM/A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="external nofollow"  />
</head>

3.2 编写显示页面

然后，创建一个div元素作为计算器的容器，并在其中添加所需的HTML元素：

<div class="calculator">
    <input type="text" id="result" readonly />
    <div class="row">
        <button class="number">7</button>
        <button class="number">8</button>
        <button class="number">9</button>
        <button class="operator"><i class="fas fa-divide"></i></button>
    </div>
    <div class="row">
        <button class="number">4</button>
        <button class="number">5</button>
        <button class="number">6</button>
        <button class="operator"><i class="fas fa-times"></i></button>
    </div>
    <div class="row">
        <button class="number">1</button>
        <button class="number">2</button>
        <button class="number">3</button>
        <button class="operator"><i class="fas fa-minus"></i></button>
    </div>
    <div class="row">
        <button class="number">0</button>
        <button class="operator"><i class="fas fa-plus"></i></button>
    </div>
    <div class="row">
        <button id="clear">C</button>
        <button id="equal">=</button>
    </div>
</div>

页面效果如图

3.3 美化计算器页面

接下来，使用CSS来美化我们的计算器界面：

.calculator {
    width: 200px;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
}
input[type="text"] {
    width: 100%;
    height: 40px;
    margin-bottom: 15px;
    padding: 10px;
    font-size: 20px;
    text-align: right;
}
.row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
button {
    width: 45px;
    height: 45px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}
.number {
    background-color: #e0e0e0;
    color: #333;
}
.operator {
    background-color: #ff9800;
    color: white;
}

现在，我们已经完成了计算器的界面。接下来，我们将使用JavaScript来实现计算器的逻辑。

3.4 实现计算器逻辑

首先，我们需要获取HTML元素的引用，并设置一些状态变量：

// 获取HTML元素的引用
const resultInput = document.getElementById("result");
const numberButtons = document.getElementsByClassName("number");
const operatorButtons = document.getElementsByClassName("operator");
const clearButton = document.getElementById("clear");
const equalButton = document.getElementById("equal");
// 设置状态变量
let currentNumber = "";
let firstNumber = "";
let operator = "";

然后，我们需要分别为数字按钮、操作符按钮和清除按钮添加事件监听器，以便在点击时执行相应的操作：

// 为数字按钮添加事件监听器
for (let i = 0; i < numberButtons.length; i++) {
    numberButtons[i].addEventListener("click", function () {
        if (operator === "") {
            firstNumber += this.innerText;
            resultInput.value = firstNumber;
        } else {
            currentNumber += this.innerText;
            resultInput.value = currentNumber;
        }
    });
}
// 为操作符按钮添加事件监听器
for (let i = 0; i < operatorButtons.length; i++) {
    operatorButtons[i].addEventListener("click", function () {
        operator = this.innerText;
        resultInput.value = operator;
    });
}
// 为清除按钮添加事件监听器
clearButton.addEventListener("click", function () {
    currentNumber = "";
    firstNumber = "";
    operator = "";
    resultInput.value = "";
});

最后，我们需要为等号按钮添加事件监听器，以便在点击时执行相应的计算操作：

// 为等号按钮添加事件监听器
equalButton.addEventListener("click", function () {
    let result;
    switch (operator) {
        case "+":
            result = parseFloat(firstNumber) + parseFloat(currentNumber);
            break;
        case "-":
            result = parseFloat(firstNumber) - parseFloat(currentNumber);
            break;
        case "*":
            result = parseFloat(firstNumber) * parseFloat(currentNumber);
            break;
        case "/":
            result = parseFloat(firstNumber) / parseFloat(currentNumber);
            break;
        default:
            result = "";
    }
    // 更新状态变量
    currentNumber = result.toString();
    firstNumber = "";
    operator = "";
    resultInput.value = result;
});

四、总结

好了，本文的内容就分享到这里。希望你在使用这个精美计算器的过程中有所收获，它不仅能帮助你进行基本的数学运算，还能为你提供一个愉快的使用体验。如果你对编程感兴趣，也欢迎自行扩展功能，让这个计算器变得更加强大。

以上就是使用JavaScript和HTML实现一个精美的计算器的详细内容，更多关于JavaScript HTML实现计算器的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

js如何找出两个数组中不同的元素
这篇文章主要介绍了js如何找出两个数组中不同的元素，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
JS下载文件|无刷新下载文件示例代码
JS下载文件的实现在网上可以找到很多教程，不过本文为大家介绍的是无刷新下载文件，貌似更酷一点是吧
2014-04-04
javascript中的五种基本数据类型
在javascript中申明变量使用的关键字都是var，这点与其他的编程语言不尽相同，但是javascript亦含有五种基本的数据类型（也可以说是简单数据类型），它们分别是：Undefined，Null，Boolean，Number和String。还含有一种复杂数据类型—Object。这里我们不谈复杂数据类型
2015-08-08
JS中正则表达式要注意lastIndex属性
这篇文章主要介绍了JS中正则表达式要注意lastIndex属性,需要的朋友可以参考下
2017-08-08
JavaScript sort排序的使用方法详解
这篇文章主要介绍了JavaScript sort排序的使用方法,sort方法用于对数组的元素进行排序,排序顺序可以是字母或数字,并按升序或降序,默认排序顺序为按字母升序,需要的朋友可以参考下
2024-10-10
js如何获取file控件的完整路径具体实现代码
需要隐藏input file然后获取它的值，但连jquery都无法获取它的值，下面与大家分享下使用js的具体获取方法，感兴趣的朋友可以参考下哈
2013-05-05
javascript实现任务栏消息提示的简单实例
下面小编就为大家带来一篇javascript实现任务栏消息提示的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-05-05
JS多个异步请求按顺序执行next实现解析
这篇文章主要介绍了js多个异步请求按顺序执行next实现解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2019-09-09
electron如何使用typescript
引入 TypeScript 到 Electron 项目可以帮助你捕捉错误并在编写代码时提供更好的自动完成和文档，这篇文章主要介绍了electron使用typescript的步骤,需要的朋友可以参考下
2024-04-04
JavaScript变量提升和严格模式实例分析
这篇文章主要介绍了JavaScript变量提升和严格模式,结合实例形式分析了javascript变量提升和严格模式的原理及相关操作注意事项,需要的朋友可以参考下
2019-01-01