返回顶部
首页 > 资讯 > 精选 >小程序怎么实现计算器功能
  • 940
分享到

小程序怎么实现计算器功能

2023-06-08 07:06:30 940人浏览 安东尼
摘要

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

本篇内容介绍了“小程序怎么实现计算器功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

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

小程序怎么实现计算器功能

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

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>

js

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://lsjlt.com/news/252318.html(转载时请注明来源链接)

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

猜你喜欢
  • 小程序怎么实现计算器功能
    本篇内容介绍了“小程序怎么实现计算器功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!实现模拟手机上的计算器,输入即可运算本页面是做一个计算...
    99+
    2023-06-08
  • 小程序实现计算器功能
    本文实例为大家分享了小程序实现计算器功能的具体代码,供大家参考,具体内容如下 实现模拟手机上的计算器,输入即可运算 本页面是做一个计算收款的页面,如果不需要下面的内容可以删除掉 w...
    99+
    2024-04-02
  • 微信小程序实现计算器小功能
    微信小程序现在越来越火爆了,我也看到很多在校大学生都在自学了,那些专门从事APP开发,网页开发的工作者更是看到了小程序的前景,在小程序领域也掺上一脚,本人也是自学小程序的,初期跟很多...
    99+
    2024-04-02
  • 微信小程序实现计算器功能
    本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 一、微信小程序开发工具界面 二、目录结构 第一次进到页面它的目录结构如下: 三、需要注意的问题 ...
    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
  • 微信小程序中怎么实现一个计算器功能
    微信小程序中怎么实现一个计算器功能,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。目录结构第一次进到页面它的目录结构如下:需要注意的问题(1)添加的新页面文件,都...
    99+
    2023-06-20
  • 微信小程序实现简单计算器功能
    微信小程序:简单计算器,供大家参考,具体内容如下 对于才接触小程序不久的人来说,想要直接上手一个实用性强的项目难度很大,想要快速熟悉小程序的使用,我们可以先尝试着做一个简单的计算器。...
    99+
    2024-04-02
  • 微信小程序实现简易计算器功能
    本文实例为大家分享了微信小程序实现简易计算器的具体代码,供大家参考,具体内容如下 实现代码: <!--pages/computer.wxml--> <view c...
    99+
    2024-04-02
  • python怎么实现计算器小功能
    python怎么实现计算器小功能,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1. 案例介绍本例利用 Python 开发一个可以进行简单的四则运算的图形化计算器,会用到 T...
    99+
    2023-06-26
  • 小程序实现计时器功能
    本文实例为大家分享了小程序实现计时器功能的具体代码,供大家参考,具体内容如下 效果图如下 布局(.wxml) <view class="countTime">{{tim...
    99+
    2024-04-02
  • 微信小程序实现计算器功能的代码怎么写
    本篇内容介绍了“微信小程序实现计算器功能的代码怎么写”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!具体代码如下:wxml<view&n...
    99+
    2023-06-08
  • 小程序怎么实现倒计时功能
    本文小编为大家详细介绍“小程序怎么实现倒计时功能”,内容详细,步骤清晰,细节处理妥当,希望这篇“小程序怎么实现倒计时功能”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。  倒计时功能是一个比较常见的功能,比如用户获...
    99+
    2023-06-26
  • 微信小程序实现简单的计算器功能
    本文实例为大家分享了微信小程序实现计算器功能的具体代码,供大家参考,具体内容如下 wxml <view class='content'> <input va...
    99+
    2024-04-02
  • 微信小程序实现简易的计算器功能
    一个初入IC的硅农,硬件编程经验3个月。偶然接触了微信小程序编程,然后自己写了一个计算器,希望得到改进意见。 功能: 1、计算 + - * /和%; 2、主要是当得出结果的时候,可以...
    99+
    2024-04-02
  • jquery实现计算器小功能
    本文实例为大家分享了jquery实现计算器功能的具体代码,供大家参考,具体内容如下 用jquery实现计算器对于我来说有三个难点 1.单纯的html页面,怎么实现计算2.显示屏用什么...
    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
  • 小程序如何实现计时器功能
    这篇文章主要介绍“小程序如何实现计时器功能”,在日常操作中,相信很多人在小程序如何实现计时器功能问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”小程序如何实现计时器功能”的疑惑有所帮助!接下来,请跟着小编一起来...
    99+
    2023-07-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作