扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现简单网页版计算器
  • 301

0
分享到

JavaScript实现简单网页版计算器

2024-04-02 19:04:59 301人浏览 泡泡鱼
摘要

背景 由于我又被分进了一个新的项目组，该项目需要用js，因为我没接触过，所以领导准备给我一周时间学习，没错，实现一个简单的支持四则混合运算的计算器就是作业，所以有了这篇文章 故，这篇

背景

由于我又被分进了一个新的项目组，该项目需要用js，因为我没接触过，所以领导准备给我一周时间学习，没错，实现一个简单的支持四则混合运算的计算器就是作业，所以有了这篇文章
故，这篇文章主要重点就不在html和CSS了，毕竟我也只是略懂皮毛，并未深究过

实现效果

最终展现的页面如下图，当鼠标点击按键时，按键会变色，可以进行四则混合运算

上面一行显示计算式，当按下“=”时，显示计算结果

用到的技术

计算器的页面是使用html的table绘制的
按键的大小，颜色，鼠标悬浮变色是用css设置的
点击按键将按键上的值和计算结果显示在最上面一行、完成四则混合运算是用js做的

实现思路

这里我分了三个文件，一个.html 一个 .css 一个 .js

1、先写了html和css，绘制出来网页展示的样子，此处不细说，有兴趣可以直接看代码
2、然后用js的DOM事件，给不同类型的按钮加上点击事件，调用不同的js函数。
这一步我开始只是先写了一个函数定义，主要是为了先划分清楚逻辑，比如按某个按键应该实现哪些功能，显示什么效果等，后面对函数进行填充逻辑就不会乱掉
3、最后去实现js函数，也就是完成四则混合运算， 重点说一下是怎么实现四则混合运算并且让结果显示出来的

上面显示算式和结果的时候，我定义了一个全局变量的数组，每次点击按键，就把点击的那个按键的值push到数组里，这样显示的时候就直接把数组丢过去。这样做的还有一个原因是点击退格键的时候就pop一下，点击清空键的时候就直接赋个空数组给数组变量，操作起来会容易一些

接着很重要的一步是计算表达式，比如说输入 3 * 4.5 - 1= 这样的一个表达式，怎么去求值呢，我想到的方法是先把输入的数组变成变成中缀表达式，再由中缀表达式转成后缀表达式，然后再进行后缀表达式求值

1. 首先通过上面的数组处理得到了这样的一个数组['3','*','4','.','5','-','1'] 
2. 把这个数组转换成字符串 变为这样 “3*4.5-1”
3. 接着处理成操作符和数字分开的新的数组  ['3','*','4.5','-','1'] 
4. 处理完之后就是利用栈来将中缀表达式变为后缀表达式
5. 再利用栈对后缀表达式求值，并且将结果填在=之后

由于4.5步是数据结构中栈应用的内容，不清楚的可以回顾一下数据结构，至此就全部完成

具体实现代码

如上，分析的已经够多了，所以这块就话不多说，直接上代码

.html文件


<!DOCTYPE html>
<html>
    <head>
        <title>calculator</title>
        <link rel="stylesheet" href="calculator.css" >
        <script src="calculator.js"></script>
    </head>

    <body>
        <div>
            <table border="1">
                <thead>
                    <th colspan="4">
                        <input type="text" id="result" disabled>
                    </th>
                </thead>

                <tbody>
                    <tr>
                        <td><button class="operate" onclick="showNumber(this)">(</button></td>
                        <td><button class="operate" onclick="showNumber(this)">)</button></td>
                        <td><button class="operate" onclick="clearOneResult()">←</button></td>
                        <td><button class="operate" onclick="clearResult()">C</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">7</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">8</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">9</button></td>
                        <td><button class="operate" onclick="showNumber(this)">*</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">4</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">5</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">6</button></td>
                        <td><button class="operate" onclick="showNumber(this)">-</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">1</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">2</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">3</button></td>
                        <td><button class="operate" onclick="showNumber(this)">+</button></td>
                    </tr>
                    <tr>
                        <td><button class="calculate" onclick="showNumber(this)">0</button></td>
                        <td><button class="calculate" onclick="showNumber(this)">.</button></td>
                        <td><button class="operate" onclick="showNumber(this)">/</button></td>
                        <td><button class="operate" onclick="showAnswer()">=</button></td>
                    </tr>
                </tbody>         
            </table>
        </div>
    </body>
</html>

.css文件


table{
    margin: 20px;
    padding: 1px;
}

th,input{
    height: 120px;
    width: 410px;
    background-color:rgb(233, 232, 232);
    text-align: right;
    font-size: 40px;
}


button{
    height: 100px;
    width: 100px;
    padding: 0px;
    font-size: 30px;
}

th,input,td,button{
    border: 0px;
}

.calculate{
    background-color: rgb(231, 231, 235);
}

.operate{
    color: coral;
}

button:hover{
    background-color: rgb(147, 241, 253);
}

.js文件


var result = new Array();
var ops = "+-*/";

function arrToStr(arr) {
    var strResult = "";
    for (var i = 0; i < arr.length; i++) {
        strResult += arr[i];
    }
    return strResult;
}


function showResult() {
    document.getElementById("result").value = arrToStr(result);
}


function showNumber(id) {
    var val = id.innerHTML;
    result.push(val);
    showResult();
}


function showAnswer() {

    var answer = "";
    var str = arrToStr(result);

    var midExpre = strToExpress(str);
    var suffixExpre = midToSuffix(midExpre);
    answer = suffixValue(suffixExpre);

    //console.log(midExpre);
    //console.log(suffixExpre);

    document.getElementById("result").value = str + "=" + answer;

}


function clearResult() {
    result = [];
    showResult();
}


function clearOneResult() {
    result.pop();
    showResult();
}


function strToExpress(str) {

    var textArr = str.split('');
    var newTextArr = [];
    var calTextArr = [];

    for (var i = 0; i < str.length; i++) {
        if (ops.indexOf(str[i]) != -1  ) {
        
            newTextArr.push("|", str[i], "|");
        }
        else if (str[i] == '('){
            newTextArr.push(str[i], "|");
        }
        else if (str[i] == ')'){
            newTextArr.push("|", str[i]);
        }
        else {
            newTextArr.push(textArr[i]);
        }
    }

    calTextArr = newTextArr.join('').split('|');

    return calTextArr;
}


function midToSuffix(midExpre) {

    var opStack = [];
    var suffixExpre = [];

    for (var i = 0; i < midExpre.length; i++) {

        if (ops.indexOf(midExpre[i]) != -1 || midExpre[i] == '(' || midExpre[i] == ')' ) {

            if (midExpre[i] == '(' || opStack[opStack.length - 1] == '(') {
                opStack.push(midExpre[i]);
            }

            else if (midExpre[i] == ')') {
                do {
                    suffixExpre.push(opStack.pop());
                } while (opStack[opStack.length - 1] != '(');
                opStack.pop();
            }
            else if (opStack.length == 0 || Priority(midExpre[i]) > Priority(opStack[opStack.length - 1])) {
                opStack.push(midExpre[i]);
            }
            else {
                do {
                    suffixExpre.push(opStack.pop());
                } while (opStack.length > 0 && Priority(midExpre[i]) <= Priority(opStack[opStack.length - 1]));

                opStack.push(midExpre[i]);
            }
        }

        else {
            suffixExpre.push(midExpre[i]);
        }
    }

    while (opStack.length > 0) {
        suffixExpre.push(opStack.pop());
    }

    return suffixExpre;
}

function Priority(op) {
    var opPri = 0;
    switch (op) {
        case "+":
            opPri = 1;
            break;
        case "-":
            opPri = 1;
            break;
        case "*":
            opPri = 2;
            break;
        case "/":
            opPri = 2;
            break;

    }
    return opPri;
}

function suffixValue(suffixExpre) {
    var calStack = [];

    console.log(suffixExpre);
    for (var i = 0; i < suffixExpre.length; i++) {
        if (ops.indexOf(suffixExpre[i]) != -1) {
            var opRight = Number(calStack.pop());
            var opLeft = Number(calStack.pop());
            var tmpResult = 0;
            switch (suffixExpre[i]) {
                case '+':
                    tmpResult = opLeft + opRight;
                    break;
                case '-':
                    tmpResult = opLeft - opRight;
                    break;
                case '*':
                    tmpResult = opLeft * opRight;
                    break;
                case '/':
                    tmpResult = opLeft / opRight;
                    break;
            }
            calStack.push(tmpResult);
        }
        else {
            calStack.push(suffixExpre[i]);
        }

        console.log(calStack);
    }

    return calStack.pop();
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。

--结束END--

本文标题: JavaScript实现简单网页版计算器

本文链接: https://lsjlt.com/news/132062.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现简单网页版计算器
    背景 由于我又被分进了一个新的项目组，该项目需要用js，因为我没接触过，所以领导准备给我一周时间学习，没错，实现一个简单的支持四则混合运算的计算器就是作业，所以有了这篇文章 故，这篇...
    99+
    2024-04-02
  • JavaScript实现网页版简易计算器功能
    本文实例为大家分享了JavaScript实现网页版计算器功能的具体代码，供大家参考，具体内容如下 运行效果 运行：直接将下面的代码放到任意文本文件中，文件后缀名改为.html，然后...
    99+
    2024-04-02
  • JSP实现简单网页计算器
    本文实例为大家分享了JSP实现简单网页计算器的具体代码，供大家参考，具体内容如下 一、构造一个简单的计算器，能够进行“+、—、*、/”运算 （1）...
    99+
    2024-04-02
  • Vue实现简单网页计算器
    本文实例为大家分享了Vue实现简单网页计算器的具体代码，供大家参考，具体内容如下 案例描述 1、 考核知识点 2、 创建vue实例和对v-model内置指令的使用 3、 练习目标 创...
    99+
    2024-04-02
  • JavaScript制作简单网页计算器
    本文实例为大家分享了JavaScript制作简单网页计算器的具体代码，供大家参考，具体内容如下 一、题目 利用JavaScript中的函数，完成数字加、减、乘、除的运算，实现一个简单...
    99+
    2022-11-13
    js 计算器
  • javascript实现编写网页版计算器
    本篇主要记录的是利用javscript实现一个网页计算器的效果，供大家参考，具体内容如下 话不多说，代码如下： 首先是html的代码： <!DOCTYPE html>...
    99+
    2024-04-02
  • 原生JavaScript实现网页版计算器
    本文实例为大家分享了JavaScript实现网页版计算器的具体代码，供大家参考，具体内容如下 由于无聊看电脑上的系统软件翻到了计算器这个功能，就简单写一下这个计算器的功能吧，这个网页...
    99+
    2024-04-02
  • JSP如何实现简单网页计算器
    小编给大家分享一下JSP如何实现简单网页计算器，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、构造一个简单的计算器，能够进行“+、&mdash;、*、/”运算（1）编写jsp页面，用户通过表单输入两个操作数和运算...
    99+
    2023-06-29
  • Vue怎么实现简单网页计算器
    这篇文章主要介绍“Vue怎么实现简单网页计算器”，在日常操作中，相信很多人在Vue怎么实现简单网页计算器问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Vue怎么实现简单网页计算器”的疑惑有所帮助！接下来，请跟...
    99+
    2023-06-30
  • JavaScript实现网页计算器
    本文实例为大家分享了JavaScript实现网页计算器的具体代码，供大家参考，具体内容如下 我们学完了函数，做一个网页计算器的小案例，巩固一下。 共两个案例： 案例一图： 相加： ...
    99+
    2024-04-02
  • 用javascript实现简单计算器
    本文实例为大家分享了javascript实现简单计算器的具体代码，供大家参考，具体内容如下 设计一个简单的计算器 代码 <body> <a>第一个...
    99+
    2024-04-02
  • javascript怎么实现编写网页版计算器
    本篇内容主要讲解“javascript怎么实现编写网页版计算器”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“javascript怎么实现编写网页版计算器”吧!本篇主要纪录的是利用javscrip...
    99+
    2023-06-20
  • 原生JavaScript如何实现网页版计算器
    这篇文章主要介绍了原生JavaScript如何实现网页版计算器，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。首先是网页计算器的样式部分不想手写直接复制即可<!DOCTY...
    99+
    2023-06-25
  • JavaScript实现简单的计算器功能
    本文实例为大家分享了JavaScript实现简单计算器功能的具体代码，供大家参考，具体内容如下 具体要求如下： 实现代码： <html> <head>...
    99+
    2024-04-02
  • JavaScript实现简单计算器小功能
    本文实例为大家分享了JavaScript实现简单计算器的具体代码，供大家参考，具体内容如下 此例为简单的计算器： 代码示例： <!DOCTYPE html> <h...
    99+
    2024-04-02
  • JavaScript实现简单计算器小程序
    本文实例为大家分享了JavaScript实现简单计算器的具体代码，供大家参考，具体内容如下 代码： <!DOCTYPE html> <html> <h...
    99+
    2024-04-02
  • 基于JavaScript实现网页计算器
    本文实例为大家分享了JavaScript实现网页计算器的扫雷游戏的具体代码，供大家参考，具体内容如下 先看效果： 此外，计算器还附有数字、运算符检查功能： 下贴源码： ...
    99+
    2024-04-02
  • JS实现简单网页倒计时器
    制作一个简单的网页倒计时器（js原生代码），供大家参考，具体内容如下 实现一个简单的网页倒计时（距离xx年x月x日还剩多少时间），效果是这样的 首先HTML代码部分，我们需要简单编...
    99+
    2022-11-13
    JS网页倒计时器 JS倒计时器 JS网页倒计时
  • 使用Javascript如何实现简单计算器
    小编给大家分享一下使用Javascript如何实现简单计算器，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！具体内容如下1.htm...
    99+
    2024-04-02
  • 用JavaScript实现简单网页时钟
    利用JavaScript实现网页时钟，效果如下图所示： 首先在body中完成表盘、指针的资源载入： <div><img src="../../image/cl...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作