热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

JavaScript实现简单网页版计算器

这篇文章主要介绍了JavaScript实现简单网页版计算器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的

背景

由于我又被分进了一个新的项目组,该项目需要用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文件



    
        
        
        
    

    
        

.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  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 

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


推荐阅读
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • 在JavaScript中,函数没有重载的概念,如果声明了多个重名的函数,不管函数的形参个数是否一样,只有最后一个有效。如果调用函数时传入的参数个数与函数定义时的参数个数不符,会出现不同的情况。函数调用时,传入的参数个数少于函数定义时的参数个数,未传入的参数会被当做undefined处理,可能会导致错误。而传入的参数个数多于函数定义时的参数个数,多余的参数不会被使用,但不会报错。 ... [详细]
  • Iamtryingtomakeaclassthatwillreadatextfileofnamesintoanarray,thenreturnthatarra ... [详细]
  • VScode格式化文档换行或不换行的设置方法
    本文介绍了在VScode中设置格式化文档换行或不换行的方法,包括使用插件和修改settings.json文件的内容。详细步骤为:找到settings.json文件,将其中的代码替换为指定的代码。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 目录实现效果:实现环境实现方法一:基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]
  • 原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ... [详细]
  • 本文介绍了C#中数据集DataSet对象的使用及相关方法详解,包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成,以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读,读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
  • 本文介绍了在wepy中运用小顺序页面受权的计划,包含了用户点击作废后的从新受权计划。 ... [详细]
  • 本文介绍了闭包的定义和运转机制,重点解释了闭包如何能够接触外部函数的作用域中的变量。通过词法作用域的查找规则,闭包可以访问外部函数的作用域。同时还提到了闭包的作用和影响。 ... [详细]
  • Go GUIlxn/walk 学习3.菜单栏和工具栏的具体实现
    本文介绍了使用Go语言的GUI库lxn/walk实现菜单栏和工具栏的具体方法,包括消息窗口的产生、文件放置动作响应和提示框的应用。部分代码来自上一篇博客和lxn/walk官方示例。文章提供了学习GUI开发的实际案例和代码示例。 ... [详细]
  • IOS开发之短信发送与拨打电话的方法详解
    本文详细介绍了在IOS开发中实现短信发送和拨打电话的两种方式,一种是使用系统底层发送,虽然无法自定义短信内容和返回原应用,但是简单方便;另一种是使用第三方框架发送,需要导入MessageUI头文件,并遵守MFMessageComposeViewControllerDelegate协议,可以实现自定义短信内容和返回原应用的功能。 ... [详细]
author-avatar
helen女孩12_667
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有