小程序实现计算器功能

2024-04-02 19:04:59 770人浏览安东尼

摘要

本文实例为大家分享了小程序实现计算器功能的具体代码，供大家参考，具体内容如下实现模拟手机上的计算器，输入即可运算本页面是做一个计算收款的页面，如果不需要下面的内容可以删除掉 w

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

实现模拟手机上的计算器，输入即可运算

本页面是做一个计算收款的页面，如果不需要下面的内容可以删除掉

wxml


<view class="calculate-box">
  <view class="calculate-txt">{{express}}</view>
  <view class="result-num">={{result}}</view>
</view>
<view class="fixation-box">
  <view class="calculator-box">
    <view class="calculator-line">
      <view data-con='c' class='boxtn btn1 clear' catchtap="clickKeyBoard">AC</view>
      <view data-con='←' class='boxtn btn1' catchtap="clickKeyBoard">
        <image src="../../../images/clear-icon.png" class="clear-icon"></image>
      </view>
      <view data-con='÷100' class='boxtn btn1 percent' catchtap="clickKeyBoard">%</view>
      <view data-con='÷' class='boxtn num' catchtap="clickKeyBoard">÷</view>
    </view>
    <view class="calculator-line">
      <view data-con='7' class='boxtn btn1 num' catchtap="clickKeyBoard">7</view>
      <view data-con='8' class='boxtn btn1 num' catchtap="clickKeyBoard">8</view>
      <view data-con='9' class='boxtn btn1 num' catchtap="clickKeyBoard">9</view>
      <view data-con='×' class='boxtn num' catchtap="clickKeyBoard">×</view>
    </view>
    <view class="calculator-line">
      <view data-con='4' class='boxtn btn1 num' catchtap="clickKeyBoard">4</view>
      <view data-con='5' class='boxtn btn1 num' catchtap="clickKeyBoard">5</view>
      <view data-con='6' class='boxtn btn1 num' catchtap="clickKeyBoard">6</view>
      <view data-con='-' class='boxtn num' catchtap="clickKeyBoard">-</view>
    </view>
    <view class="calculator-line">
      <view data-con='1' class='boxtn btn1 num' catchtap="clickKeyBoard">1</view>
      <view data-con='2' class='boxtn btn1 num' catchtap="clickKeyBoard">2</view>
      <view data-con='3' class='boxtn btn1 num' catchtap="clickKeyBoard">3</view>
      <view data-con='+' class='boxtn num' catchtap="clickKeyBoard">+</view>
    </view>
    <view class="calculator-line">
      <view data-con='0' class='boxtn btn2 num' catchtap="clickKeyBoard">0</view>
      <view data-con='.' class='boxtn btn1 num' catchtap="clickKeyBoard">.</view>
      <view data-con='=' class='boxtn equal' catchtap="result">=</view>
    </view>
  </view>
  <view class="bottom-handle">
    <!-- <view class="sweep-code-verification" bindtap="sweepCodeVerification">
      <image src="../../../images/sweep-code-verification.png"></image>
      <text>扫码核销</text>
    </view> -->
    <view style="flex: 1;font-size: 34rpx;" class="artificial-collection" bindtap="artificial_collection">
      <!--<image src="../../../images/artificial-collection.png"></image> -->
      <text>人工收款</text>
    </view>
    <view class="payment-code" bindtap="qrcode_collection">收款码收款</view>
  </view>
</view>


data: {
    express: '', //第一行的表达式
    result: '0', //第二行的结果
    calc2: {
      str: '', //临时字符串
      strList: [], //中缀表达式存储（队列先进先出）
      strListP: [], //后缀表达式（队列先进先出）
      list: [], //存放运算符的堆栈 （先进后出）
      count: [], //计算表达式堆栈（先进后出）
      flag: 0 //表示字符串最后一位是否是运算符号位
    },
    isqr: false,
  },
   //给所有text或view绑定此事件，同时增加对应的自定义属性值
  clickKeyBoard(e) {
    let that = this;
    let input = e.currentTarget.dataset.con //获取每次输入的内容
    if (input == "c") {
      that.handleClear();
    } else if (input == "←") {
      that.handleDelete();
    } else {
      //调用处理字符串
      that.handleInfo(input);

    }


  },

  //处理本地用户的输入操作
  handleInfo(input) {
    if (this.data.calc2.str.length == 0) { //第一次点击
      if (input == "-" || this.checkShuZi(input)) { //为减号
        this.addStr(input);
      } else {
        return;
      }
    } else {
      if (this.data.calc2.flag == 1) { //说明最后一位是符号
        if (this.checkFuHao(input)) {
          this.data.calc2.str = this.data.calc2.str.substring(0, this.data.calc2.str.length - 1); //去掉最后一位符号，添加最新的符号进去
          this.addStr(input);
        } else {
          this.addStr(input);
        }
        console.log();
      } else {
        this.addStr(input);
        this.result();
      }
    }
    this.result();
  },

  //客户点击等号了
  result() {
    //每次点击等号重新把列表给空
    this.data.calc2.strList.length = 0;
    this.data.calc2.strListP.length = 0;
    this.data.calc2.list.length = 0;
    this.data.calc2.count.length = 0;

    //将表达式变成中缀表达式队列
    this.expressToStrList(this.data.express);
    console.log(this.data.calc2.strList);

    //将中缀表达式集合赋值给临时变量
    let tempList = this.data.calc2.strList;
    this.expressToStrListP(tempList);
    console.log(this.data.calc2.strListP);

    //最终的计算
    let tempP = this.data.calc2.strListP
    for (let m in tempP) {
      if (this.checkFuHao2(tempP[m])) { //不含点号的符号方法判断
        let m1 = this.data.calc2.count[0]; //取出第一个数据
        this.data.calc2.count.shift(); //取出后删除该数据
        let m2 = this.data.calc2.count[0];
        this.data.calc2.count.shift();
        // console.log('m1是' +m1);
        // console.log('m2是' + m2);
        // console.log('运算符是' + tempP[m]);
        // console.log('计算结果是：' + this.countDetail(m2, tempP[m], m1));
        this.data.calc2.count.unshift(this.countDetail(m2, tempP[m], m1)); //将计算结果放到count中
      } else {
        this.data.calc2.count.unshift(tempP[m]) //将数字压进去
      }
    }
    console.log('最终的计算结果是' + parseFloat(this.data.calc2.count[0]).toFixed(2));
    this.setData({
      result: this.data.calc2.count[0]
    });
  },

  //实际具体计算
  countDetail(e1, e2, e3) {
    let result = 0.0;
    console.log(e1);
    console.log(e2);
    console.log(e3);
    try {
      if (e2 == "×") {
        if (typeof(e1) != "undefined") {
          result = parseFloat(e1) * parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      } else if (e2 == "÷") {
        if (typeof(e1) != "undefined") {
          result = parseFloat(e1) / parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      } else if (e2 == "%") {
        if (typeof(e1) != "undefined") {
          result = parseFloat(e1) / parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      } else if (e2 == "+") {
        if (typeof(e1) != "undefined") {
          result = parseFloat(e1) + parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      } else {
        if (typeof (e1) != "undefined") {
          result = parseFloat(e1) - parseFloat(e3);
        } else {
          result = parseFloat(e3);
        }
      }
    } catch (error) {

    }
    return result;
  },

  //将中缀表达式集合转变为后缀表达式集合
  expressToStrListP(tempList) {
    for (let item in tempList) {
      if (this.checkFuHao2(tempList[item])) { //不含点号的符号方法判断
        if (this.data.calc2.list.length == 0) {
          this.data.calc2.list.unshift(tempList[item]); //直接添加添加运算符
        } else {
          if (this.checkFuHaoDX(this.data.calc2.list[0], tempList[item])) {
            for (let x in this.data.calc2.list) {
              this.data.calc2.strListP.push(this.data.calc2.list[x]); //将运算符都放到listP中
            }
            this.data.calc2.list.length = 0; //循环完把list置空
            this.data.calc2.list.unshift(tempList[item]); //加新元素进去
          } else {
            this.data.calc2.list.unshift(tempList[item]); //直接添加添加运算符
          }
        }
      } else {
        this.data.calc2.strListP.push(tempList[item]); //数字直接加到后缀集合中
      }
    }
    //循环完有可能最后一个是数字了，取到的不是字符，那么运算符里剩余的还的加到listP中
    if (this.data.calc2.list.length > 0) {
      for (let x in this.data.calc2.list) {
        this.data.calc2.strListP.push(this.data.calc2.list[x]); //将运算符都放到listP中
      }
      this.data.calc2.list.length = 0; //循环完把list置空
    }
  },

  //判断两个运算符的优先级(m1是list集合中最后加进去的那个元素比较将要进来的元素，如果m1比m2大，弹出list集合到listp中，再把m2加到list中，否则直接将m2加入list)
  checkFuHaoDX(m1, m2) {
    if ((m1 == "%" || m1 == "×" || m1 == "÷") && (m2 == "-" || m2 == "+")) {
      return true;
    } else {
      return false;
    }
  },

  //将字符串表达式变成中缀队列
  expressToStrList(express) {
    let temp = ''; //定义临时变量
    //将表达式改为中缀队列
    for (let i = 0; i < express.length; i++) {
      if (i == 0 && express[i] == "-") {
        temp = temp + express[i];
      } else {
        if (this.checkShuZi2(express[i])) { //如果i是数字
          temp = temp + express[i];
        } else {
          if (temp.length > 0) {
            if (express[i] == ".") {
              temp = temp + express[i];
            } else {
              this.data.calc2.strList.push(parseFloat(temp));
              temp = '';
              this.data.calc2.strList.push(express[i]);
            }
          } else {
            temp = temp + express[i];
          }
        }
      }
    }
    //循环到最后再看temp中有没有数字了，如果有加进来
    if (temp.length > 0 && this.checkShuZi(temp.substring(temp.length - 1))) {
      this.data.calc2.strList.push(parseFloat(temp));
      temp = '';
    }
  },

  //处理客户输入清除键
  handleClear() {
    this.data.calc2.str = '';
    this.data.calc2.strList.length = 0;
    this.data.calc2.strListP.length = 0;
    this.data.calc2.list.length = 0;
    this.data.calc2.count.length = 0;
    this.data.calc2.minusFlag = 0;
    this.setData({
      express: '',
      result: ''
    });
  },
  //处理客户输入回退键
  handleDelete() {
    let that = this;
    let str = that.data.calc2.str;
    if (str.length > 0) {
      str = str.substring(0, str.length - 1);
      that.data.calc2.str = str;
      that.setData({
        express: str,
      });
    } else {
      return;
    }
  },

  //判断是否是运算符（含点号，用在组织表达式时 .不能重复输入）
  checkFuHao(input) {
    if (input == "-" || input == "+" || input == "÷" || input == "%" || input == "×" || input == ".") {
      return true;
    } else {
      return false;
    }
  },

  //判断是否是运算符（不含点号）
  checkFuHao2(input) {
    if (input == "-" || input == "+" || input == "÷" || input == "%" || input == "×") {
      return true;
    } else {
      return false;
    }
  },

  //判断是否是数字
  checkShuZi(input) {
    if (input == "0" || input == "1" || input == "2" ||
      input == "3" || input == "4" || input == "5" ||
      input == "6" || input == "7" || input == "8" || input == "9") {
      return true;
    } else {
      return false;
    }
  },

  //判断是否是数字(包含.号，用在表达式转中缀方法中)
  checkShuZi2(input) {
    if (input == "0" || input == "1" || input == "2" ||
      input == "3" || input == "4" || input == "5" ||
      input == "6" || input == "7" || input == "8" || input == "9" || input == ".") {
      return true;
    } else {
      return false;
    }
  },

  //给字符串添加新字符(直接追加 在判断是否要改变变量flag)
  addStr(input) {
    this.data.calc2.str = this.data.calc2.str + input;
    if (this.checkFuHao(input)) {
      this.data.calc2.flag = 1; //设置标记位位1
    } else {
      this.data.calc2.flag = 0;
    }
    this.setData({
      express: this.data.calc2.str
    });
  },

wxss




page {
  background-color: #f8f8f8;
}

.bottom-handle {
  height: 100rpx;
  width: 100%;
  display: flex;
  align-items: center;
}

.fixation-box {
  position: fixed;
  bottom: 0;
  width: 750rpx;
}

.sweep-code-verification {
  background: #fff;
  border-top: 1rpx solid #e3e3e3;
  width: 220rpx;
  color: #333;
}

.artificial-collection, .sweep-code-verification {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 24rpx;
  justify-content: center;
}

.artificial-collection {
  background: #f3b055;
  width: 248rpx;
  color: #fff;
}

.payment-code {
  background-image: linear-gradient(203Deg, #6f6f6f 0%, #3c3c3c 96%);
  flex: 1;
  font-size: 34rpx;
  color: #fff;
  text-align: center;
  line-height: 100rpx;
}

.sweep-code-verification image {
  width: 40rpx;
  height: 40rpx;
}

.artificial-collection image {
  width: 40rpx;
  height: 40rpx;
}

.calculator-box {
  background-color: #fff;
}

.calculator-line {
  display: flex;
  align-items: center;
}

.boxtn {
  width: 25%;
  height: 154rpx;
  border-left: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calculator-box .calculator-line:last-child {
  border-bottom: none;
}

.calculator-line {
  border-bottom: 1rpx solid #dedede;
}

.btn1, .btn2 {
  border-right: 1rpx solid #dedede;
}

.btn2 {
  width: 50%;
}

.equal {
  background: #f3b055;
  font-size: 61rpx;
  color: #fff;
}

.num {
  font-size: 60rpx;
  color: #000;
}

.clear {
  font-size: 48rpx;
  color: #f3b055;
}

.percent {
  font-size: 60rpx;
  color: #000;
}

.charge-content {
  background: #fff;
  border-radius: 24rpx;
  width: 540rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.charge-title {
  background: #f3b055;
  border-radius: 12px 12px 0 0;
  width: 100%;
  height: 92rpx;
  font-size: 34rpx;
  line-height: 92rpx;
  text-align: center;
  color: #fff;
}

.charge-money {
  font-size: 60rpx;
  color: #333;
  line-height: 84rpx;
  margin-top: 35rpx;
}

.charge-propmt {
  font-size: 28rpx;
  color: #999;
  line-height: 42rpx;
  padding-bottom: 40rpx;
}

.charge-btn {
  display: flex;
  align-items: center;
  height: 100rpx;
  border-top: 1rpx solid #DDD;
  width: 100%;
}

.charge-cancel, .charge-confirm {
  flex: 1;
  text-align: center;
  line-height: 100rpx;
  font-size: 34rpx;
}

.charge-cancel {
  color: #999;
  border-right: 1rpx solid #ddd;
}

.charge-confirm {
  color: #f3b055;
}

.successful-content {
  background: #fff;
  border-radius: 24rpx;
  width: 540rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.success-icon {
  width: 120rpx;
  margin-top: 45rpx;
  height: 120rpx;
}

.successful-title {
  font-size: 34rpx;
  color: #333;
  line-height: 42rpx;
  padding: 30rpx 0;
  font-weight: 600;
}

.clear-icon {
  width: 80rpx;
  height: 80rpx;
}

.calculate-box {
  position: fixed;
  top: 0;
  bottom: 875rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 0 50rpx;
}

.result-num {
  font-size: 88rpx;
  color: #333;
  line-height: 124rpx;
}

.calculate-txt {
  font-size: 60rpx;
  color: #333;
  line-height: 84rpx;
  margin-top: auto;
  Word-wrap: break-word;
  text-align: right;
  word-break: break-all;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -WEBkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.suspend-box{
  height: 64rpx;
  background-color: rgba(0, 0, 0, .5);
  position: fixed;
  top: 70rpx;
  left: 0;
  color: #fff;
  display: flex;
  align-items: center;
  font-size: 24rpx;
  padding: 0 20rpx;
  border-radius: 0 100rpx 100rpx 0;
  z-index: 9;
}
.close-suspend{
  width: 30rpx;
  height: 30rpx;
}

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

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 小程序实现计算器功能

本文链接: https://www.lsjlt.com/news/130720.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

小程序实现计算器功能

本文实例为大家分享了小程序实现计算器功能的具体代码，供大家参考，具体内容如下实现模拟手机上的计算器，输入即可运算本页面是做一个计算收款的页面，如果不需要下面的内容可以删除掉 w...

99+

2024-04-02
微信小程序实现计算器小功能

微信小程序现在越来越火爆了，我也看到很多在校大学生都在自学了，那些专门从事APP开发，网页开发的工作者更是看到了小程序的前景，在小程序领域也掺上一脚，本人也是自学小程序的，初期跟很多...

99+

2024-04-02
小程序怎么实现计算器功能

本篇内容介绍了“小程序怎么实现计算器功能”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！实现模拟手机上的计算器，输入即可运算本页面是做一个计算...

99+

2023-06-08
微信小程序实现计算器功能

本文实例为大家分享了微信小程序实现计算器功能的具体代码，供大家参考，具体内容如下一、微信小程序开发工具界面二、目录结构第一次进到页面它的目录结构如下：三、需要注意的问题 ...

99+

2024-04-02
用微信小程序实现计算器功能

本文是用微信小程序写的一个简单的计算器，有兴趣的小伙伴可以了解一下。页面部分 <view class='box'> <view class='txt...

99+

2024-04-02
微信小程序如何实现计算器小功能

这篇文章主要介绍微信小程序如何实现计算器小功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！微信小程序现在越来越火爆了，我也看到很多在校大学生都在自学了，那些专门从事APP开发，网页开发的工作者更是看到了小程序的前景...

99+

2023-06-20
小程序实现计时器小功能

本文实例为大家分享了小程序实现计时器小功能的具体代码，供大家参考，具体内容如下效果图如下布局（.wxml） <view class="countTime">{{ti...

99+

2024-04-02
微信小程序实现简易计算器功能

本文实例为大家分享了微信小程序实现简易计算器的具体代码，供大家参考，具体内容如下实现代码：  <view c...

99+

2024-04-02
微信小程序实现简单计算器功能

微信小程序：简单计算器，供大家参考，具体内容如下对于才接触小程序不久的人来说，想要直接上手一个实用性强的项目难度很大，想要快速熟悉小程序的使用，我们可以先尝试着做一个简单的计算器。...

99+

2024-04-02
小程序实现计时器功能

本文实例为大家分享了小程序实现计时器功能的具体代码，供大家参考，具体内容如下效果图如下布局（.wxml） <view class="countTime">{{tim...

99+

2024-04-02
微信小程序实现简易的计算器功能

一个初入IC的硅农，硬件编程经验3个月。偶然接触了微信小程序编程，然后自己写了一个计算器，希望得到改进意见。功能： 1、计算 + - * /和%； 2、主要是当得出结果的时候，可以...

99+

2024-04-02
微信小程序实现简单的计算器功能

本文实例为大家分享了微信小程序实现计算器功能的具体代码，供大家参考，具体内容如下 wxml <view class='content'> <input va...

99+

2024-04-02
python实现计算器小功能

本文实例为大家分享了python实现计算器功能的具体代码，供大家参考，具体内容如下 1. 案例介绍本例利用 Python 开发一个可以进行简单的四则运算的图形化计算器，会用到 Tk...

99+

2024-04-02
iOS实现计算器小功能

本文实例为大家分享了iOS实现计算器小功能，供大家参考，具体内容如下本文利用ios实现计算器app，后期将用mvc结构重构 import UIKit class CalculVi...

99+

2024-04-02
jquery实现计算器小功能

本文实例为大家分享了jquery实现计算器功能的具体代码，供大家参考，具体内容如下用jquery实现计算器对于我来说有三个难点 1.单纯的html页面，怎么实现计算2.显示屏用什么...

99+

2024-04-02
小程序如何实现计时器功能

这篇文章主要介绍“小程序如何实现计时器功能”，在日常操作中，相信很多人在小程序如何实现计时器功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”小程序如何实现计时器功能”的疑惑有所帮助！接下来，请跟着小编一起来...

99+

2023-07-02
微信小程序中如何实现一个计算器功能

这期内容当中小编将会给大家带来有关微信小程序中如何实现一个计算器功能，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。index.wxml<view class="content&q...

99+

2023-06-20
微信小程序如何实现简单的计算器功能

这篇文章主要介绍微信小程序如何实现简单的计算器功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！具体内容如下wxml<view class='content'> &nb...

99+

2023-06-20
微信小程序中怎么实现一个计算器功能

微信小程序中怎么实现一个计算器功能，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。目录结构第一次进到页面它的目录结构如下：需要注意的问题(1)添加的新页面文件，都...

99+

2023-06-20
C#实现简易计算器小功能

本文实例为大家分享了C#实现简易计算器小功能的具体代码，供大家参考，具体内容如下简易的登陆界面。具有幻灯片效果。（picturebox time控件）计算器支持多位数，小数，括...

99+

2024-04-02