使用JS实现多功能计算器

  介绍

今天就跟大家聊聊有关使用JS实现多功能计算器,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

计算。html:

& lt; !—   * @Author: CSU_XZY   * @Date: 2020-10-15 21:17:33   * @LastEditors: CSU_XZY   * @LastEditTime: 2020-10-16 22:07:08   * @FilePath: \第二天\计算器\ compute.html   * @Description:只是为了玩   ——比;   & lt; !DOCTYPE html>   & lt; html lang=癳n"祝辞   & lt; head>   & lt;元charset=癠TF-8"祝辞   & lt;元名称=皏iewport"内容=翱矶?设备宽度,初始=1.0,比;   & lt; title>计算器& lt;/title>   & lt;/head>   & lt; style>   * {   保证金:0;   填充:0;   }   身体{   background - color: # FCFDFE;   }   .container {   溢出:隐藏;   不必:0 0 3 px 0 rgba (0, 0, 0, 0。3);   保证金:150 px的汽车;   宽度:548 px;   身高:274 px;   background - color: # fff;   }   .box {   background - color: # fcfdff;   保证金:15 px汽车;   溢出:隐藏;   宽度:514 px;   身高:244 px;   }   .number {   宽度:514 px;   身高:189 px;   }   。text {   宽度:514 px;   高度:55 px;   保证金:0;   }   跨度{   border-top:固体1 px # ebebeb;   边境:固体1 px # ebebeb;   box-sizing: border-box;   浮:左;   显示:块;   宽度:25%;   字体大小:16 px;   颜色:# 333;   background - color: # fff;   行高:37 px;   光标:指针;   text-align:中心;   粗细:10 px;   }   跨度:{徘徊   background - color: # d3d7d4;   }   跨度:主动{   background - color: # afdfe4;      }      .text> p {   text-align:正确;   宽度:514 px;   高度:24 px;   行高:25 px;   字体大小:25 px;   }   .number> div {   宽度:514 px;   高度:37.8 px;   }   图腾{   background - color: # f9f9f9;   颜色:#法郎;   }   .compute {   颜色:# 333;   }   .bottom {   background - color: # fff;   颜色:#法郎;   }   . dot {   字体大小:23 px;   粗细:19 px;   }   & lt;/style>   & lt; body>   & lt; div类=癱ontainer"祝辞   & lt; div类=癰ox"祝辞   & lt; div类=皌ext"祝辞   & lt; p id=皌ext"祝辞& lt;/p>   & lt; p id=癲isplay"祝辞& lt;/p>   & lt;/div>   & lt; div类=皀umber"祝辞   & lt; div类=癮round"祝辞   & lt;跨度>/*   * @Author: CSU_XZY   * @Date: 2020-10-15 21:17:45   * @LastEditors: CSU_XZY   * @LastEditTime: 2020-10-17 00:04:41   * @FilePath: \第二天\计算器\ compute.js   * @Description:只是为了玩   */var ysf=[& # 39; + & # 39; & # 39;÷& # 39;, & # 39;=& # 39;, & # 39;) & # 39;, & # 39; % & # 39;, & # 39; x # 39;, & # 39; & # 39;, & # 39; d # 39;];   var sizeyunsuan=[& # 39; + & # 39; & # 39;÷& # 39;, & # 39; (& # 39; & # 39; x # 39;, & # 39; & # 39;];   var isNumber=[& # 39; 1 & # 39; & # 39; 2 & # 39;, & # 39; 3 & # 39;, & # 39; 4 & # 39;, & # 39; 5 & # 39;, & # 39; 6 & # 39;, & # 39; 7 & # 39;, & # 39; 8 & # 39;, & # 39; 9 & # 39;, & # 39; 0 & # 39;, & # 39; # 39;公司);         showDetails函数(数量)   {   var=number.getAttribute数量(“data-value");   var文本=. getelementbyid(& # 39;显示# 39;).innerText;//回退一个文字   如果(数量===& # 39;d # 39;)   {   文本=text.substring (0, text.length-1);   . getelementbyid(& # 39;显示# 39;).innerHTML=文本;   返回;   }//判断第一个数字是不是运算符   else if (judgeBegin(数字),,文本==啊?   返回;//判断是否是连续两个运算符一起输入   else if (judgeBegin(数字),,judgeNext(文本、数字),,文本(文本。长度是1]!==& # 39;)& # 39;   返回;//判断第一个输入是不是“# 39;公司,如果是变为0。   else if(数量===& # 39;强生# 39;,,文本==啊?   数量=?干净;//如果输入归0,清空输入   else if(数量===& # 39;c # 39;)   {   . getelementbyid(& # 39;文本# 39;).innerHTML=?”;   . getelementbyid(& # 39;显示# 39;).innerHTML=?”;   返回;   }//输入是等号就判断   else if(数量===& # 39;=& # 39;)   {//将数字与运算符分开   让=[]数组;   让n=text.length;   (让我=0;我& lt;n;我+ +)   {   var JudgeNumber=true;   让res=?“;//判断第一个数字是否是负号   如果(我===0,,文本[我]===& # 39;& # 39;)   {   res +=文本(我);   我+ +;   }//判断是不是在运算符之后的减号,是就变为负号   如果(我!==0,,(数组[array.length-1])附近,,文本[我]===& # 39;& # 39;)   {   res +=文本(我);   我+ +;   }//判断是否为连续的数字   而(JudgeIsNumber(文本[我]),,我& lt;n)   {   res +=文本(我);   我+ +;   JudgeNumber=false;   }//如果不为数字了要回退一个   如果(JudgeNumber===false)   我,;//判断其他运算符   如果(JudgeNumber===true)   如果(judgeBegin(文本[我])| |文本[我]===& # 39;(& # 39;| |文本[我]===& # 39;& # 39;| |文本[我]===& # 39;)& # 39;   res +=文本(我);   array.push (res);   }//console.log(数组);//中缀表达式变为后缀表达式   var赫兹=houZhui(数组);   console.log (hz);   var=计算结果(hz);   . getelementbyid(& # 39;文本# 39;)。innerHTML=文本;   . getelementbyid(& # 39;显示# 39;)。innerHTML=结果;   返回;   }   文本+=数量;   . getelementbyid(& # 39;显示# 39;).innerHTML=文本;   }//判断是不是运算符   函数judgeBegin(数量)   {   (让我=0;我& lt;ysf.length;我+ +)   {   如果(ysf[我]===& # 39;& # 39;)   继续;   如果(ysf[我]===数量)   返回true;   }   返回错误;   }//判断是否输入两个连续的运算符   函数judgeNext(文本、数量)   {   如果(数量===& # 39;& # 39;)   返回;   让一个=text.length;   如果(judgeBegin(文本(a - 1)),,judgeBegin(数量)   返回true;   返回错误;   }//判断输入的字符里面是不是数字   函数JudgeIsNumber(数量){   (让我=0;我& lt;isNumber.length;我+ +)   {   如果(isNumber[我]===数量)   返回true;   }   返回错误;   }//判断减号前面是否有别的运算符从而确定是不是负号   函数附近(数量)   {   (让我=0;我& lt;sizeyunsuan.length;我+ +)   {   如果(sizeyunsuan[我]===数量)   返回true;   }   返回错误;   }//中缀表达式改为后缀表达式   函数houZhui(数组)   {   var堆栈=[];   var textArea=[];   (让我=0;我& lt;array.length;我+ +)   {   如果(附近(array[我])| |阵列[我]===& # 39;)& # 39;)   {//如果是空直接入栈   如果堆栈。长度===0)   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

使用JS实现多功能计算器