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

这篇具有很好参考价值的文章主要介绍了用JavaScript和HTML实现一个精美的计算器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、前言

计算器是我们日常生活中经常使用的工具之一,可以帮助我们进行简单的数学运算。在本博文中,我将使用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" 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" />
</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>

页面效果如图
用JavaScript和HTML实现一个精美的计算器,100个JavaScript的小应用,javascript,html,开发语言

3.2 美化计算器页面

接下来,使用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来实现计算器的逻辑。
用JavaScript和HTML实现一个精美的计算器,100个JavaScript的小应用,javascript,html,开发语言

3.3 实现计算器逻辑

首先,我们需要获取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;
});

四、总结

好了,本文的内容就分享到这里。 希望你在使用这个精美计算器的过程中有所收获,它不仅能帮助你进行基本的数学运算,还能为你提供一个愉快的使用体验。如果你对编程感兴趣,也欢迎自行扩展功能,让这个计算器变得更加强大。文章来源地址https://www.toymoban.com/news/detail-615908.html

到了这里,关于用JavaScript和HTML实现一个精美的计算器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JavaScript 用三种方法做一个简易计算器

    基本数据类型 / 使用对象创建 new执行过程 // 1.new构造函可以在内存中创建了一个空的对象 // 2.this就会指向刚才创建的空对象 // 3.执行构造函数里面的代码 给这个空对象添加属性和方法 // 4.返回这个新对象(所以构造函数里面不需要return)

    2024年02月06日
    浏览(55)
  • 模拟实现一个简单的计算器

    2024年02月11日
    浏览(53)
  • 用代码实现一个简单计算器

    作者主页: paper jie的博客_CSDN博客-C语言,算法详解领域博主 本文作者: 大家好,我是paper jie,感谢你阅读本文,欢迎一建三连哦。 本文录入于 《C语言》专栏,本专栏是针对于大学生,编程小白精心打造的。笔者用重金(时间和精力)打造,将C语言基础知识一网打尽,希望可

    2024年02月08日
    浏览(43)
  • HTML+CSS+JS+Django 实现前后端分离的科学计算器、利率计算器(附全部代码在gitcode链接)

    本次作业完成了 全部的基础功能 和附件功能1. 前端修改利率表 2. 科学计算 3. 页面原型设计 以及扩展功能1. 动态按钮,动态背景,页面局部or全局切换等等。 这个作业属于哪个课程 2301-计算机学院-软件工程 这个作业要求在哪里 软工实践第二次作业 这个作业的目标 实现一个

    2024年02月08日
    浏览(46)
  • Java算法题 给一个字符串表达式,实现一个基本计算器,返回计算结果

    题目: 考点:栈 解题思路: 使用 2 个栈,一个 stack_nums 用来保存计算过程的操作数,一个 stack_symbol 用来保存运算符。 在HashMap中,指定加减优先级为1,乘除优先级为2 循环遍历字符串s, 操作符入栈: 若当前字符为\\\'+\\\', \\\'-\\\', \\\'*\\\', \\\'/\\\', \\\'(\\\' 时,压入运算符栈 stack_symbol, 操作数入

    2024年02月07日
    浏览(50)
  • 【C++小项目】实现一个日期计算器

    目录 Ⅰ. 引入 Ⅱ. 列轮廓 Ⅲ. 功能的实现 构造函数 Print 判断是否相等 == | != ➡️==: ➡️!=: 判断大小 | = | | = ➡️: ➡️=: ➡️=: ➡️: 加减天数 + | += | - | -= ➡️+=: ➡️+: ➡️-: ➡️-=: 自增/自减 ++ | -- ➡️前置++ ➡️后置++ ➡️前置-- ➡️后置-- 日期减日期 ➡

    2024年02月11日
    浏览(43)
  • 使用 Jetpack Compose 实现一个计算器APP

    在上一篇文章中,我们说到打算使用 compose 实现一个计算器 APP,最开始打算做一个经典的 LCD 基础计算器,后来觉得好像没啥特色,最终决定还是改成仿微软计算器。 不过,微软计算器的功能太多了,仿制的工程量不小,所以我打算只仿我认为最核心的两个模式:标准模式和

    2024年02月05日
    浏览(65)
  • 【Servlet学习三】实现一个内存版本的简易计算器~

    目录 一、方式1:使用form表单的形式(不推荐) 🌈1、前端代码:HTML文件 🌈2、后端代码:Calculator_form.java文件 🌈3、最终效果 二、方式2:使用ajax形式(最常用重点!!!) 🌈1、前端代码:HTML文件 🌈2、后端代码:Calculator_ajax.java文件 🌈3、最终效果  注意: (1)前端

    2024年02月12日
    浏览(43)
  • 【Java】Java使用Swing实现一个模拟计算器(有源码)

       📝个人主页:哈__ 期待您的关注  今天翻了翻之前写的代码,发现自己之前还写了一个计算器,今天把我之前写的代码分享出来。  我记得那会儿刚学不会写,写的乱七八糟,但拿来当期末作业还是不错的哈哈。 直接上源码,后上讲解。 计算器上的按键不少,我们都定

    2024年04月11日
    浏览(66)
  • 初学编程 第一个小程序Android studio实现计算器功能

    源代码下载:https://gitee.com/zha-yingying/calculator.git 1.建立一个新的Layout,我这里使用的是GridLayout(网格布局),提取屏幕宽度(方便后面设置子控件的宽度)GridLayout的特点是自定义网格布局有几行几列,我们可以将自控件自定义放在第几行第几列。 2.建立一个新的textview(文本

    2023年04月14日
    浏览(68)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包