[Javascript]简单的数学计算器

最新推荐文章于 2023-09-25 08:00:00 发布
最新推荐文章于 2023-09-25 08:00:00 发布
阅读量2k 收藏 4
点赞数 2
分类专栏： Javascript 文章标签： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc1998414/article/details/82924675
版权

一个简单的数学计算器

实现了小部分的基础功能, 大概是这样:

代码如下:

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Calculator</title>
</head>
<style>
    .all-calculator-location-set{
        width: 260px;
        margin: 200px auto;  
    }
    .btn-style{
        width: 60px;
        height: 40px;
    }
    .input-calculator-show{
        width: 250px;
        height: 50px;
        text-align: right;
        font-size: 30px;
    }
    .panel-location{
        margin-top: 20px;
    }
</style>

<body>
    <div class="all-calculator-location-set">
        <div>
            <input class="input-calculator-show" type="text" id="Calculator_show" disabled="disabled" value="0">
        </div>
        <div class="panel-location">
            <input class="btn-style" type="button" value="CE" onclick="clear_this_num()">
            <input class="btn-style" type="button" value="C" onclick="clear_num()">
            <input class="btn-style" type="button" value="←" onclick="backspace_num()">
            <input class="btn-style" type="button" value="/" onclick="calculation(3)">
            <br>
            <input class="btn-style" type="button" value="7" onclick="add_num(7)">
            <input class="btn-style" type="button" value="8" onclick="add_num(8)">
            <input class="btn-style" type="button" value="9" onclick="add_num(9)">
            <input class="btn-style" type="button" value="*" onclick="calculation(2)">
            <br>
            <input class="btn-style" type="button" value="4" onclick="add_num(4)">
            <input class="btn-style" type="button" value="5" onclick="add_num(5)">
            <input class="btn-style" type="button" value="6" onclick="add_num(6)">
            <input class="btn-style" type="button" value="-" onclick="calculation(1)">
            <br>
            <input class="btn-style" type="button" value="1" onclick="add_num(1)">
            <input class="btn-style" type="button" value="2" onclick="add_num(2)">
            <input class="btn-style" type="button" value="3" onclick="add_num(3)">
            <input class="btn-style" type="button" value="+" onclick="calculation(0)">
            <br>
            <input class="btn-style" type="button" value="±" onclick="minus_num()">
            <input class="btn-style" type="button" value="0" onclick="add_num(0)">
            <input class="btn-style" type="button" value="." onclick="add_num('.')">
            <input class="btn-style" type="button" value="=" onclick="getValue()">
            <br>
        </div>
    </div>
</body>

<script>

    var Calculator_show = document.getElementById('Calculator_show');

    var first_num = "";
    var second_num = "";

    var setCalculatorType = -1;

    /**
     * 获取键盘输入, 组成数字
     *
     * @param {*} param 输入的数字
     */
    function add_num(param) {
        //当一次计算完成的时候, 如果不继续点击运算符,
        //那么返回初始状态, 为下一次计算做准备
        if (first_num != "" && setCalculatorType == -1 && second_num != "") {
            clear_num();
        }
        //当用户直接点击小数点时, 自动补零
        if (first_num.length === 0 && param == '.') {
            first_num += "0";
        }
        first_num += param.toString();
        Calculator_show.value = first_num;
    }

    /**
     *回退键
     *
     * @returns
     */
    function backspace_num() {
        //当一次计算的完成的时候, 数字不能进行回退操作
        //获取异常, 直接返回原始状态即可
        try {
            if (first_num.length === 1) {
                Calculator_show.value = 0;
                first_num = "";
                return;
            }
            first_num = first_num.substring(0, first_num.length - 1);
            Calculator_show.value = first_num;
        } catch (e) {
            clear_num();
        }
    }

    /**
     *清除当前计算的数, 以供重新输入
     *
     */
    function clear_this_num() {
        first_num = "";
        Calculator_show.value = 0;
    }

    /**
     *计算器回归到原始状态
     *
     */
    function clear_num() {
        first_num = "";
        second_num = "";
        setCalculatorType = -1;
        Calculator_show.value = 0;
    }

    /**
     *调整操作数是正数还是负数
     *
     */
    function minus_num() {
        if (first_num != 0) {
            first_num = Number(0 - first_num);
            Calculator_show.value = first_num;
        }
    }

    /**
     *存储操作数
     *设置计算方式
     *
     * @param {*} param 计算方式
     */
    function calculation(param) {
        if (setCalculatorType == -1) {
            second_num = first_num;
        }
        // switch (param) {
        //     case 0:
        //         setCalculatorType = 0;
        //         break;
        //     case 1:
        //         setCalculatorType = 1;
        //         break;
        //     case 2:
        //         setCalculatorType = 2;
        //         break;
        //     case 3:
        //         setCalculatorType = 3;
        //         break;
        // }
        setCalculatorType = param;
        first_num = "";
        Calculator_show.value = 0;
    }

    function addition() {
        return Number(second_num) + Number(first_num);
    }

    function subtraction() {
        return Number(second_num) - Number(first_num);
    }

    function multiplication() {
        return Number(second_num) * Number(first_num);
    }

    function division() {
        return Number(second_num) / Number(first_num);
    }

    /**
     *获取最后的结果
     *
     */
    function getValue() {
        switch (setCalculatorType) {
            case 0:
                Calculator_show.value = first_num = addition();
                break;
            case 1:
                Calculator_show.value = first_num = subtraction();
                break;
            case 2:
                Calculator_show.value = first_num = multiplication();
                break;
            case 3:
                Calculator_show.value = first_num = division();
                break;
            default:
                Calculator_show.value = 0;
        }
        setCalculatorType = -1;
    }
</script>

</html>

大概是这样:

胖纸不争
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
JavaScript 计算器
allway2的博客
06-02 7244
在本教程中，我们将创建一个简单的JavaScript 计算器。该计算器能够对 2 个或 2 个以上的数字进行加减乘除。计算器可以成为日常生活中非常有用的应用程序。您可以使用计算器来计算您的购物账单、计算您的贷款、执行简单的数学计算等。一般来说，我们有两种类型的计算器，一种是科学计算器，另一种是简单计算器。科学计算器用于执行复杂的数学计算，如平方根、平方、立方、对数、三角函数等。而简单的计算器用于执行简单的数学计算，如加法、减法、乘法和除法。我们将在本文中使用 HTML、CSS 和 JavaScript 逐步
JavaScript实现计算器
wangshiyi13的博客
07-18 5368
使用JavaScript编写了一个简易的计算器，基本与手机计算器一致。
【Javascript保姆级教程】Javascript数据类型和算术运算符
最新发布
m0_62599305的博客
09-25 243
JavaScript是一种广泛应用于网页开发和应用程序编程的脚本语言。了解JavaScript的数据类型和算术运算符对于学习和理解JavaScript的基本概念至关重要。本篇文章将带您深入了解JavaScript的数据类型和如何使用算术运算符进行基本数学计算。本篇文章介绍了JavaScript中的常见数据类型和算术运算符。了解数据类型是编程的基础，它们使我们能够存储和操作不同类型的数据。算术运算符让我们可以进行基本的数学计算和操作。
用JavaScript实现简单的计算器
sinat_37503265的博客
05-30 7900
基于JavaScript实现计算器中的加减乘除等基本功能
JAVAScript实现简易计算器
weixin_53754024的博客
03-22 480
JavaScript+html+css实现简易计算器
使用JavaScript 编写简单计算器
10-25
在JavaScript中创建一个简单的计算器是一项基础任务，可以帮助初学者理解事件处理、DOM操作以及基本的数学运算。以下是如何实现这个简单计算器的详细步骤和相关知识点： 1. **HTML 结构**： HTML 部分定义了一个...
javascript实现简易计算器的代码
10-22
在本文中，我们将深入探讨如何使用JavaScript实现一个简易计算器。这个计算器可以进行基本的加、减、乘、除运算，并具备清零、退格和等于功能。以下是对代码的详细解释： 首先，我们需要一个HTML结构来展示计算器的...
javascript编写简易计算器
10-19
在本教程中，我们将探讨如何使用JavaScript来创建一个简单的计算器。这个计算器的界面由HTML构建，样式由CSS定义，而核心逻辑则通过JavaScript实现。以下是我们将深入讨论的知识点： 1. **HTML 结构**： - `<div>`...
JavaScript实现简单计算器功能
11-27
在本实例中，我们讨论如何使用JavaScript来实现一个简单的计算器功能。这个计算器的基本操作包括数字输入、运算符选择以及计算结果的显示。以下是对代码的详细解析： 首先，HTML部分创建了一个基本的用户界面，包括...
javascript实现简易的计算器
11-21
在本示例中，我们将探讨如何使用JavaScript实现一个简单的计算器。这个计算器的实现涉及HTML、CSS和JavaScript三个主要部分。 首先，我们从HTML结构开始。HTML用于构建计算器的用户界面，包括输入框(input)和一系列...
JavaScript简易计算器
02-28
利用JavaScript简易计算器，北大青鸟javascript作业题
Calculator:使用JavaScript的计算器
03-04
Calculator:使用JavaScript的计算器
js写的计算器
高级数据分析师，分享Python知识
11-07 167
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&gt; input{width:100px;height: 20px;margin-left: 20px;margin-top: 10
强大的JavaScript数学计算框架
火柴头的专栏
06-14 1010
<!DOCTYPE HTML> <html> <head> <script src="math.min.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> console....
javascript简单数学计算之减法
qq_42331499的博客
01-27 475
javascript简单数学计算之减法 &lt;script type="text/javascript"&gt; document.write(3-1); &lt;/script&gt; 结果是2
JavaScript初学——计算器的实现
weixin_40615146的博客
01-08 1630
在学习JavaScript之前，知道如果需要做一个加减法运算需要调用到后端的数据处理，前端在没有js运算的情况下无法实现，但是在制作完简易版本的“输入数字型计算器”后，便想着，如果计算器的实现能够和我们日常使用的计算器一样，那么就可以免去了自己选或者打错字符的烦恼，因此打算制作一个JavaScript计算器。 首先，在制作计算器之前，先要完成它的具体外观，具体代码如下： ...
推荐一个不错的百度前端 数学公式编辑器
jackyrongvip的专栏
01-07 2920
推荐一个不错的百度前端 数学公式编辑器 ，支持常见的数学公式编辑 http://t.cn/RvWcmqt
实现计算器HTML+JS简单实现计算器
热门推荐
huangjiangmin
03-04 3万+
这个是在闲暇之余，写出玩的一个小东西，没有复杂的算法，没有特别厉害的逻辑。只是方便有人需要的话直接用。也希望有大神可以帮我设计设计。下面是代码：   &lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;无标题文档&lt;/title&gt;&lt;link rel=&
用javascript实现简单计算器
LittleTreeX的博客
12-09 3709
这是一个简单计算器的实现。可以实现简单的加，减，乘，除功能，用户按下“←”按钮，删除当前算术表达式最后一个字符，并更新显示,用户按下“CE”按钮，清除当前算术表达式,如果算术表达式非法，弹出警告框提醒用户，并终止计算. 这是HTML代码：     Calculator                             简单计算器              
JavaScript编写计算器
05-12
好的，以下是一个简单的 JavaScript 计算器： ```html <!DOCTYPE html> <title>JavaScript Calculator body { background-color: #f2f2f2; font-family: Arial, sans-serif; } #calculator { ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

胖纸不争

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值