首页
所有分类
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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
jQuery Pagination Ajax分页插件(分页切换时无刷新与延迟)中文翻译版
Jan 11 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
Ajax的概述与实现过程
Nov 18 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
Jul 19 Javascript
angular.js实现购物车功能
Oct 23 Javascript
JS实现简易换图时钟功能分析
Jan 04 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
Jul 02 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
Openlayers实现地图的基本操作
Sep 28 Javascript
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
岗位职责(1324) 演讲稿(869) 欢迎词(65) 创业计划书(312) 思想汇报(404) 心得体会(660) 推荐信(292) 证婚词(21) 求职信(1029) 职业生涯规划书(234)
You might like
ThinkPHP与PHPExcel冲突解决方法
2011/08/08 PHP
php堆排序（heapsort）练习
2013/11/13 PHP
PHP对称加密算法（DES/AES）类的实现代码
2017/11/14 PHP
javascript innerText和innerHtml应用
2010/01/28 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
深入理解JavaScript系列（38）：设计模式之职责链模式详解
2015/03/04 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
AngularJS 过滤器的简单实例
2016/07/27 Javascript
超详细的JS弹出窗口代码大全
2020/04/18 Javascript
AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】
2016/11/02 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法（排序，过滤，分页等）
2016/11/09 Javascript
微信小程序 引入es6 promise
2017/04/12 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
详解webpack中的hash、chunkhash、contenthash区别
2018/01/05 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
2018/08/03 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
教你使用python画一朵花送女朋友
2018/03/29 Python
Python requests库用法实例详解
2018/08/14 Python
python批量图片处理简单示例
2019/08/06 Python
python区分不同数据类型的方法
2019/10/14 Python
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
意大利男装网店：Vrients
2019/05/02 全球购物
年度考核自我鉴定
2013/11/09 职场文书
读群众路线心得体会
2014/03/07 职场文书
向领导表决心的话
2014/03/11 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
大二学生自我检讨书
2014/10/23 职场文书
工作证明格式范文
2015/06/15 职场文书
python实现ROA算子边缘检测算法
2021/04/05 Python
Python基础之pandas数据合并
2021/04/27 Python
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python