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

JavaScript实现简单计算器

Posted in Javascript onMarch 19, 2020

适合初学者参考的简易计算器，里面没有太多的难以理解的方法，使用的是最基础的JS语法解决式子的运算问题，同时处理了式子中的运算优先级。

实现思路

1、通过绑定点击事件实现待计算式子的输入
2、遍历原式子，读取式子中乘除运算符的位置
3、优先处理乘除取余运算
4、处理加减运算
5、返回结果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
 <!-- 计算器 -->
 <style>
    .work2{
      width: 500px;
      margin-top: 50px;
    }
    h2{
      color: #333;
    }
    #work2Article1{
      width: 100%;
      height: 200px;
      background: #cccccc;
      font-size: 20px;
    }
    #work2Article2{
      width: 100%;
      height: 400px;
      background: #cccccc;
    }
    #work2Article2 button{
      width: 24.1%;
      height: 20%;
      color: #333;
      background: #999;
    }
    .work2 button{
      font-size: 20px;
    }
    
  </style>
  <section class="work2">
    <h2>计算器</h2>
    <article id="work2Article1">
  
    </article>
    <article id="work2Article2">
      <button id="work2BtnCle">AC</button>
      <button id="work2BtnDel">×</button>
      <button id="work2BtnRem">%</button>
      <button id="work2BtnDiv">/</button>
      <button id="work2Btn7">7</button>
      <button id="work2Btn8">8</button>
      <button id="work2Btn9">9</button>
      <button id="work2BtnMul">*</button>
      <button id="work2Btn4">4</button>
      <button id="work2Btn5">5</button>
      <button id="work2Btn6">6</button>
      <button id="work2BtnSub">-</button>
      <button id="work2Btn1">1</button>
      <button id="work2Btn2">2</button>
      <button id="work2Btn3">3</button>
      <button id="work2BtnAdd">+</button>
      <button id="work2BtnNull">未开发</button>
      <button id="work2Btn0">0</button>
      <button id="work2BtnPoi">.</button>
      <button id="work2BtnEqu">=</button>
    </article>
  </section>
    
  <script>
    
    var num = "0";         //输入的原式
    var res = 0 ;          //结果

    var work2Article1 = document.getElementById('work2Article1');

    var work2BtnCle = document.getElementById('work2BtnCle');
    var work2BtnDiv = document.getElementById('work2BtnDiv');
    var work2BtnDel = document.getElementById('work2BtnDel');
    var work2BtnRem = document.getElementById('work2BtnRem');
    var work2BtnMul = document.getElementById('work2BtnMul');
    var work2BtnSub = document.getElementById('work2BtnSub');
    var work2BtnAdd = document.getElementById('work2BtnAdd');
    var work2BtnNull = document.getElementById('work2BtnNull');
    var work2BtnPoi = document.getElementById('work2BtnPoi');
    var work2BtnEqu = document.getElementById('work2BtnEqu');
    
    var work2Btn1 = document.getElementById('work2Btn1');
    var work2Btn2 = document.getElementById('work2Btn2');
    var work2Btn3 = document.getElementById('work2Btn3');
    var work2Btn4 = document.getElementById('work2Btn4');
    var work2Btn5 = document.getElementById('work2Btn5');
    var work2Btn6 = document.getElementById('work2Btn6');
    var work2Btn7 = document.getElementById('work2Btn7');
    var work2Btn8 = document.getElementById('work2Btn8');
    var work2Btn9 = document.getElementById('work2Btn9');
    var work2Btn0 = document.getElementById('work2Btn0');
    
    // 初始化
    work2BtnCle.onclick = function () {
      num = "0" ;
      work2Article1.innerText=`${num}`;
    }
   
    work2BtnDel.onclick = function () {
      // 判断原式长度，长度为1时变为0
      if(num.length==1){
        num = '0' ;
        work2Article1.innerText=num;
        // 否则减去最后一位
      }else{
        num = num.substring(0,num.length-1);
        work2Article1.innerText=num;
      }
    }
    // 运算符点击事件
    work2BtnDiv.onclick = function () {
      num += "/" 
      work2Article1.innerText=num;
    }
    work2BtnRem.onclick = function () {
      num += "%" ; 
      work2Article1.innerText=`${num}`;
    }
    work2BtnMul.onclick = function () {
      num += "*" ; 
      work2Article1.innerText=`${num}`;
    }
    work2BtnAdd.onclick = function () {
      num += "+" ; 
      work2Article1.innerText=`${num}`;
    }
    work2BtnNull.onclick = function () {
      alert('下次一定开发出来');
    }
    work2BtnPoi.onclick = function () {
      num += "." ; 
      work2Article1.innerText=`${num}`;
    }
    work2BtnSub.onclick = function () {
      num += "-" ; 
      work2Article1.innerText=`${num}`;
    }
   
    // 数字点击事件
    work2Btn1.onclick =function(){
      if( num == "0" ){
        num = "1";
      }else{
        num += "1" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn2.onclick =function(){
      if( num == "0" ){
        num = "2";
      }else{
        num += "2" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn3.onclick =function(){
      if( num == "0" ){
        num = "3";
      }else{
        num += "3" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn4.onclick =function(){
      if( num == "0" ){
        num = "4";
      }else{
        num += "4" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn5.onclick =function(){
      if( num == "0" ){
        num = "5";
      }else{
        num += "5" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn6.onclick =function(){
      if( num == "0" ){
        num = "6";
      }else{
        num += "6" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn7.onclick =function(){
      if( num == "0" ){
        num = "7";
      }else{
        num += "7" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn8.onclick =function(){
      if( num == "0" ){
        num = "8";
      }else{
        num += "8" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn9.onclick =function(){
      if( num == "0" ){
        num = "9";
      }else{
        num += "9" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn0.onclick =function(){
      if( num == "0" ){
        num = "0";
      }else{
        num += "0" ;
      }
      work2Article1.innerText=`${num}`;
    }
  
  
    work2BtnEqu.onclick = function () {
      // num = Number(num);


      //检测运算符号的位置 
      function obtainSymbol(){
        var num1 = [];
        var o = 0 ;
        for(var i = 0 ; i<=num.length ; i++){
          if(num.charAt(i)=='+'){
            num1[o] = i ;
            o++;
          }else if(num.charAt(i)=='-'){
            num1[o] = i ;
            o++;
          }else if(num.charAt(i)=='*'){
            num1[o] = i ;
            o++;
          }else if(num.charAt(i)=='/'){
            num1[o] = i ;
            o++;
          }else if(num.charAt(i)=='%'){
            num1[o] = i ;
            o++;
          }
        }
        return num1 ;
      }

      var res1 = 0 ;     //计算结果
      var numStar = num ;  //重新获取原式子
      // 检测乘除取余运算
      var num1 = obtainSymbol();
      console.log(num1);

      // 检测除了第一个符号之外的乘除取余运算
      for( var w = 0 ; w <= num1.length ; w++ ){
        if(w != 0){
          if( num.charAt(num1[w]) == '*' || num.charAt(num1[w]) == '/' || num.charAt(num1[w]) == '%' ){
            if(w != num1.length-1){
              switch(num.charAt(num1[w])){
              case '*': var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ;
                  console.log(l);
                  num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; 
                  break;
              case '/': var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ;
                  num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; break;
              case '%': var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ;
                  num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; break;
              }
            }else if(w == num1.length-1 ){
              switch(num.charAt(num1[w])){
              case '*': var l =Number(num.substring(num1[w-1]+1,num1[w])) * Number(num.substring(num1[w]+1)) ;
                  num = num.substring(0,num1[w-1]+1) + l ;
                  break;
              case '/': var l =Number(num.substring(num1[w-1]+1,num1[w])) / Number(num.substring(num1[w]+1)) ;
                  num = num.substring(0,num1[w-1]+1) + l ; break;
              case '%': var l =Number(num.substring(num1[w-1]+1,num1[w])) % Number(num.substring(num1[w]+1)) ;
                  num = num.substring(0,num1[w-1]+1) + l; break;
              }
            }
          num1 = 0 ;
          num1 = obtainSymbol();
          w -= 1;
          }
        }
      }
      
      // 从第一位运算符开始运算
      for(var k = 0 ; k < num1.length ; k++){
        if(k==0){        
          switch(num.charAt(num1[k])){
            case '+': res1 += Number(num.substring(0,num1[k])) + Number(num.substring(num1[k]+1,num1[k+1])) ; break;
            case '-': res1 += Number(num.substring(0,num1[k])) - Number(num.substring(num1[k]+1,num1[k+1])) ; break;
            case '*': res1 += Number(num.substring(0,num1[k])) * Number(num.substring(num1[k]+1,num1[k+1])) ; break;
            case '/': res1 += Number(num.substring(0,num1[k])) / Number(num.substring(num1[k]+1,num1[k+1])) ; break;
            case '%': res1 += Number(num.substring(0,num1[k])) % Number(num.substring(num1[k]+1,num1[k+1])) ; break; 
          }
        }else{
          switch(num.charAt(num1[k])){
            case '+': 
              if(k==num1.length-1){
              res1 += Number(num.substring(num1[k]+1)) ;
            
              }else{
                res1 += Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
            case '-': 
              if(k==num1.length-1){
              res1 -= Number(num.substring(num1[k]+1)) ;
              }else{
                res1 -= Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
            case '*': 
              if(k==num1.length-1){
              res1 *= Number(num.substring(num1[k]+1)) ;
              }else{
                res1 *= Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
            case '/': 
              if(k==num1.length-1){
              res1 /= Number(num.substring(num1[k]+1)) ;
              }else{
                res1 /= Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
            case '%': 
              if(k==num1.length-1){
              res1 %= Number(num.substring(num1[k]+1)) ;
              }else{
                res1 %= Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
          }
          
        } 
      }
  
      work2Article1.innerText=`${numStar}=${res1}`;
    }
  </script>
</body>
</html>

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

JavaScript实现简单计算器

- Author -

皮卡皮卡?

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

Javascript 相关文章推荐
准确获得页面、窗口高度及宽度的JS
Nov 26 Javascript
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
js的2种继承方式详解
Mar 04 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
基于JavaScript实现动态创建表格和增加表格行数
Dec 20 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
使用JS 插件qrcode.js生成二维码功能
Feb 20 Javascript
bootstrap时间插件daterangepicker使用详解
Oct 19 Javascript
JS实现的抛物线运动效果示例
Jan 30 Javascript
基于Vue2.X的路由和钩子函数详解
Feb 09 Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 Javascript
JS实现可视化音频效果的实例代码
Jan 16 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
webpack 动态批量加载文件的实现方法
Mar 19 #Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 #Javascript
js实现经典贪吃蛇小游戏
Mar 19 #Javascript
javascrpt密码强度校验函数详解
Mar 18 #Javascript
Node.js Domain 模块实例详解
Mar 18 #Javascript
js判断密码强度的方法
Mar 18 #Javascript
kubernetes(1) HBuilder(1) delete in(1) group by(1) Express(1) Three.js(1) 查询效率(1) GPU(1) 条形码(1) 分布式追踪(1)
You might like
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
PHP实现的超长文本分页显示功能示例
2018/06/04 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
JS跨域总结
2012/08/30 Javascript
使用JavaScript刷新网页的方法
2015/06/04 Javascript
jQuery内容折叠效果插件用法实例分析(附demo源码)
2016/04/28 Javascript
深入浅析JavaScript函数前面的加号和叹号
2016/07/09 Javascript
JS 根据子网掩码，网关计算出所有IP地址范围示例
2020/04/23 Javascript
Java  Spring 事务回滚详解
2016/10/17 Javascript
JavaScript实现简单的星星评分效果
2017/05/18 Javascript
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
AngularJS实现动态切换样式的方法分析
2018/06/26 Javascript
Vue使用Proxy监听所有接口状态的方法实现
2019/06/07 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
浅谈微信小程序列表埋点曝光指南
2019/10/15 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
python 默认参数问题的陷阱
2016/02/29 Python
浅谈python装饰器探究与参数的领取
2017/12/01 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python中tkinter的应用:修改字体的实例讲解
2019/07/17 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
pandas分批读取大数据集教程
2020/06/06 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
美国家具网站：Cymax
2016/09/17 全球购物
英国户外服装、鞋类和设备的领先零售商：Millets
2020/10/12 全球购物
上海某公司.net方向笔试题
2014/09/14 面试题
《挑山工》的教学反思
2014/02/16 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
SpringBoot+Redis实现布隆过滤器的示例代码
2022/03/17 Java/Android