首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JS实现多功能计算器

Posted in Javascript onOctober 28, 2020

本文实例为大家分享了JS实现多功能计算器的具体代码，供大家参考，具体内容如下

1、开发语言 HTML+CSS+JavaScript

2、开发工具 Visual Studio Code

3、项目GitHub地址：计算器 (喜欢可以给一个star)

4、项目运行截图：

JS实现多功能计算器

5、技术分析：由于除了简单的四则运算，还需要进行括号匹配，以及优先级的运算。采用后缀表达式的形式进行处理，同时通过模拟栈的特点运用JS自带的数组进行处理。由于代码有详细的注释，所以直接上代码。

6、项目代码：

compute.html：

<!--
 * @Author: CSU_XZY
 * @Date: 2020-10-15 21:17:33
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-10-16 22:07:08
 * @FilePath: \第二天\计算器\compute.html
 * @Description: just to play
-->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>计算器</title>
</head>
<style>
 *{
  margin: 0;
  padding: 0;
 }
 body{
  background-color: #FCFDFE;
 }
 .container{
  overflow: hidden;
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .3);
  margin: 150px auto;
  width: 548px;
  height: 274px;
  background-color: #fff;
 }
 .box{
  background-color: #fcfdff;
  margin: 15px auto;
  overflow: hidden;
  width: 514px;
  height: 244px;
 }
 .number{
  width: 514px;
  height: 189px;
 }
 .text{
  width: 514px;
  height: 55px;
  margin: 0;
 }
 span{
  border-top: solid 1px #ebebeb;
  border-right: solid 1px #ebebeb;
  box-sizing: border-box;
  float: left;
  display: block;
  width: 25%;
  font-size: 16px;
  color: #333;
  background-color: #fff;
  line-height: 37px;
  cursor: pointer;
  text-align: center;
  font-weight: 10px;
 }
 span:hover{
  background-color: #d3d7d4;
 }
 span:active{
  background-color: #afdfe4;
  
 }
 
 .text>p{
  text-align: right;
  width: 514px;
  height: 24px;
  line-height: 25px;
  font-size: 25px;
 }
 .number>div{
  width: 514px;
  height: 37.8px;
 }
 .around{
  background-color: #f9f9f9;
  color: #f60;
 }
 .compute{
  color: #333;
 }
 .bottom{
  background-color: #fff;
  color: #f60;
 }
 .dot{
  font-size: 23px; 
  font-weight: 19px;
 }
</style>
<body>
 <div class="container">
  <div class="box">
   <div class="text">
    <p id="text"></p>
    <p id="display"></p>
   </div>
   <div class="number">
    <div class="around">
     <span onclick="showDetails(this)" data-value="(" class="around">(</span>
     <span onclick="showDetails(this)" data-value=")" class="around">)</span>
     <span onclick="showDetails(this)" data-value="D" title="回退一位数" class="around">del</span>
     <span onclick="showDetails(this)" data-value="C" class="around compute">C</span>
    </div>
    <div>
     <span onclick="showDetails(this)" data-value="7">7</span>
     <span onclick="showDetails(this)" data-value="8">8</span>
     <span onclick="showDetails(this)" data-value="9">9</span>
     <span onclick="showDetails(this)" data-value="÷" class="around">÷</span>
    </div>
    <div>
     <span onclick="showDetails(this)" data-value="4">4</span>
     <span onclick="showDetails(this)" data-value="5">5</span>
     <span onclick="showDetails(this)" data-value="6">6</span>
     <span onclick="showDetails(this)" data-value="x" class="around">x</span>
    </div>
    <div>
     <span onclick="showDetails(this)" data-value="1">1</span>
     <span onclick="showDetails(this)" data-value="2">2</span>
     <span onclick="showDetails(this)" data-value="3">3</span>
     <span onclick="showDetails(this)" data-value="-" class="around">-</span>
    </div>
    <div>
     <span onclick="showDetails(this)" data-value="0">0</span>
     <span onclick="showDetails(this)" data-value="." class="around bottom dot">.</span>
     <span onclick="showDetails(this)" data-value="=" class="around bottom">=</span>
     <span onclick="showDetails(this)" data-value="+" class="around">+</span>
    </div>
   </div>
  </div>
 </div>
</body>
<script type="text/javascript" src="compute.js"></script>
</html>

compute.js:

/*
 * @Author: CSU_XZY
 * @Date: 2020-10-15 21:17:45
 * @LastEditors: CSU_XZY
 * @LastEditTime: 2020-10-17 00:04:41
 * @FilePath: \第二天\计算器\compute.js
 * @Description: just to play
 */
var ysf = ['+','÷','=',')','%','x','-','D'];
var sizeyunsuan = ['+','÷','(','x','-'];
var isNumber = ['1','2','3','4','5','6','7','8','9','0','.'];


function showDetails(number)
{
 var number = number.getAttribute("data-value");
 var text = document.getElementById('display').innerText;
//回退一个文字
 if(number === 'D')
 {
  text = text.substring(0,text.length-1);
  document.getElementById('display').innerHTML=text;
  return;
 }
//判断第一个数字是不是运算符
 else if(judgeBegin(number) && text == "")
 return;
//判断是否是连续两个运算符一起输入
 else if(judgeBegin(number) && judgeNext(text,number) && text[text.length-1] !== ')')
 return;
//判断第一个输入是不是‘.'，如果是变为0.
 else if(number === '.' && text == "")
 number = "0.";
//如果输入归0，清空输入
 else if(number === 'C')
 {
  document.getElementById('text').innerHTML="";
  document.getElementById('display').innerHTML="";
  return;
 }
//输入是等号就判断
 else if(number === '=')
 {
  //将数字与运算符分开
  let array = [];
  let n = text.length;
  for(let i = 0; i < n; i++)
  {
   var JudgeNumber = true;
   let res = "";
   //判断第一个数字是否是负号
   if(i===0 && text[i] === '-')
   {
    res+=text[i];
    i++;
   }
   //判断是不是在运算符之后的减号，是就变为负号
   if(i !== 0 && near(array[array.length-1]) && text[i] === '-')
   {
    res+=text[i];
    i++;
   }
   //判断是否为连续的数字
   while(JudgeIsNumber(text[i]) && i < n)
   {
    res += text[i];
    i++;
    JudgeNumber = false;
   }
   //如果不为数字了要回退一个
   if(JudgeNumber === false)
   i--;
   //判断其他运算符
   if(JudgeNumber === true)
   if(judgeBegin(text[i]) || text[i] === '(' || text[i] === '-' || text[i] === ')')
   res+=text[i];
   array.push(res);
  }
  //
   console.log(array);
  //中缀表达式变为后缀表达式
  var hz = houZhui(array);
  console.log(hz);
  var result = compute(hz);
  document.getElementById('text').innerHTML = text;
  document.getElementById('display').innerHTML = result;
  return;
 }
 text+=number;
 document.getElementById('display').innerHTML=text;
}

//判断是不是运算符
function judgeBegin(number)
{
 for(let i = 0; i < ysf.length; i++)
 {
  if(ysf[i] === '-')
  continue;
  if(ysf[i] === number)
  return true;
 }
 return false;
}

//判断是否输入两个连续的运算符
function judgeNext(text,number)
{
 if(number === '-')
 return;
 let a = text.length;
 if(judgeBegin(text[a-1]) && judgeBegin(number))
 return true;
 return false;
}

//判断输入的字符里面是不是数字
function JudgeIsNumber(number){
 for(let i = 0; i < isNumber.length; i++)
 {
  if(isNumber[i] === number)
  return true;
 }
 return false;
}

//判断减号前面是否有别的运算符从而确定是不是负号
function near(number)
{
 for(let i = 0; i < sizeyunsuan.length; i++)
 {
  if(sizeyunsuan[i] === number)
  return true;
 }
 return false;
}

//中缀表达式改为后缀表达式
function houZhui(array)
{
 var stack = [];
 var textArea = [];
 for(let i = 0; i < array.length; i++)
 {
  if(near(array[i]) || array[i] === ')')
  {
   //如果是空直接入栈
   if(stack.length === 0)
   stack.push(array[i]);
   //如果栈顶为左括号直接入栈
   else if(stack[stack.length-1] === '(' && array[i] !== ')')
   stack.push(array[i]);
   //如果输入左括号直接入栈
   else if(array[i] === '(')
   stack.push(array[i]);
   //如果输入的是右括号
   else if(array[i] === ')')
   {
    //一直弹出直到遇到左括号
    while(stack[stack.length-1] !== '(')
    {
     let a = stack.pop();
     textArea.push(a);
    }
    //弹出左括号
    stack.pop();
   }
   else if(array[i] === '-' || array[i] === '+')
   {
    while(stack[stack.length-1] !== '(' && stack.length !== 0)
    {
     let a = stack.pop();
     textArea.push(a);
    }
    stack.push(array[i]);
   }
   else if(array[i] === 'x' || array[i] === '÷')
   {
    while(stack[stack.length-1] !== '(' && stack[stack.length-1] !== '+' && stack[stack.length-1] !== '-' && stack.length !== 0)
    {
     let a = stack.pop();
     textArea.push(a);
    }
    stack.push(array[i]);
   }
  }
  else{
   textArea.push(array[i])
  }
 }
 while(stack.length !== 0)
 {
  let a = stack.pop();
  textArea.push(a);
 }
 return textArea;
}

//计算后缀表达式
function compute(array){
 var NUMBER = [];
 for(let i = 0; i < array.length; i++)
 {
  //是运算符就计算
  if(near(array[i])){
   //加法
   if(array[i] === '+')
   {
    if(NUMBER.length < 2)
    return "错误";
    else
    {
     let a = NUMBER.pop();
     let b = NUMBER.pop();
     let c = a + b;
     NUMBER.push(c);
    }
   }
   //减法
   else if(array[i] === '-')
   {
    if(NUMBER.length < 2)
    return "错误";
    else
    {
     let a = NUMBER.pop();
     let b = NUMBER.pop();
     let c = b - a;
     NUMBER.push(c);
    }
   }
   //乘法
   else if(array[i] === 'x')
   {
    if(NUMBER.length < 2)
    return "错误";
    else
    {
     let a = NUMBER.pop();
     let b = NUMBER.pop();
     let c = a * b;
     NUMBER.push(c);
    }
   }
   //除法
   else if(array[i] === '÷')
   {
    if(NUMBER.length < 2)
    return "错误";
    else
    {
     let a = NUMBER.pop();
     let b = NUMBER.pop();
     if(a === 0)
     return "0不能作为除数";
     let c = b / a;
     NUMBER.push(c);
    }
   }
  }
  else{
   if(array[i][0] === '-')
   {
    let temp = array[i].substring(1,array[0].length);
    let num = parseFloat(temp);
    num = -num;
    NUMBER.push(num);
   }
   else{
    let num = parseFloat(array[i]);
    NUMBER.push(num);
   }
   console.log(NUMBER);
  }
 }
 if(NUMBER.length !== 1)
 return "错误";
 else
 {
  let b = String(NUMBER[0]);
  return b;
 }
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JS实现多功能计算器

- Author -

烯烃@

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery实现瀑布流的取巧做法分享
Jan 12 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
基于JS实现二维码图片固定在右下角某处并跟随滚动条滚动
Feb 08 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
js上传图片预览的实现方法
May 09 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
node将geojson转shp返回给前端的实现方法
May 29 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
jQuery带控制按钮轮播图插件
Jul 31 jQuery
JS实现简单贪吃蛇小游戏
Oct 28 #Javascript
VUE和Antv G6实现在线拓扑图编辑操作
Oct 28 #Javascript
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 #Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
Oct 28 #Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 #Javascript
js 实现碰撞检测的示例
Oct 28 #Javascript
在antd Table中插入可编辑的单元格实例
Oct 28 #Javascript
摩纳哥购物网站(1) 捷克购物网站(26) 北美洲购物网站(1) 匈牙利购物网站(11) 卡塔尔购物网站(3) 秘鲁购物网站(1) 缅甸购物网站(1) 越南购物网站(9) 菲律宾购物网站(13) 巴基斯坦购物网站(2)
You might like
php自定义函数之递归删除文件及目录
2010/08/08 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php遍历文件夹和文件列表示例分享
2014/03/11 PHP
浅谈php命令行用法
2015/02/04 PHP
PHP json_encode() 函数详解及中文乱码问题
2015/11/05 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
详解php实现页面静态化原理
2017/06/21 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
php实现生成PDF文件的方法示例【基于FPDF类库】
2018/07/21 PHP
利用javascript移动div层-javascript 拖动层
2009/03/22 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
Java/JS获取flash高宽的具体方法
2013/12/27 Javascript
使用js获取图片原始尺寸
2014/12/03 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
2015/05/12 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
2016/08/05 Javascript
利用bootstrapValidator验证UEditor
2016/09/14 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
vue 本地服务不能被外部IP访问的完美解决方法
2018/10/29 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
Python每天必学之bytes字节
2016/01/28 Python
Python实现遍历目录的方法【测试可用】
2017/03/22 Python
Django REST framework视图的用法
2019/01/16 Python
python实现自动解数独小程序
2019/01/21 Python
python函数调用,循环,列表复制实例
2020/05/03 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
我为党旗添光彩演讲稿
2014/09/13 职场文书
2014年财务经理工作总结
2014/12/08 职场文书
运动会观后感
2015/06/09 职场文书
运输公司工作总结
2015/08/11 职场文书
职场中的你，辞职信写对了吗？
2019/06/26 职场文书
python使用openpyxl库读写Excel表格的方法（增删改查操作）
2021/05/02 Python
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python