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

这篇文章主要介绍微信小程序如何实现简单的计算器功能，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

具体内容如下

wxml

<view class='content'>   <input value='{{calculation}}'></input>   <view class='box'>     <button class='yellow-color'>退格</button>     <button class='yellow-color' bindtap='empty'>清屏</button>     <button class='yellow-color'>❤</button>     <button bindtap='add' data-text='+' class='yellow-color'>+</button>   </view>   <view class='box'>     <button bindtap='add' data-text='9'>9</button>     <button bindtap='add' data-text='8'>8</button>     <button bindtap='add' data-text='7'>7</button>     <button bindtap='add' class='yellow-color' data-text='-'>-</button>   </view>   <view class='box'>     <button bindtap='add' data-text='6'>6</button>     <button bindtap='add' data-text='5'>5</button>     <button bindtap='add' data-text='4'>4</button>     <button bindtap='add' class='yellow-color' data-text='*'>*</button>   </view>   <view class='box'>     <button bindtap='add' data-text='3'>3</button>     <button bindtap='add' data-text='2'>2</button>     <button bindtap='add' data-text='1'>1</button>     <button bindtap='add' data-text='/' class='yellow-color'>÷</button>   </view>   <view class='box'>     <button bindtap='add' data-text='0'>0</button>     <button bindtap='add' data-text='.'>.</button>     <button>历史</button>     <button class='yellow-color' bindtap='res'>=</button>   </view> </view>

wxss

input {   width: 95%;   height: 250rpx;   margin: 0 auto;   margin-bottom: 20rpx;   border-bottom: 1rpx solid #ccc; } .box {   display: flex; } button {   width: 20%;   height: 150rpx;   margin-bottom: 20rpx;   line-height: 150rpx;   background-color:rgb(0, 150, 250);   color: white; } .yellow-color {   background-color: rgb(247, 142, 24) }

JS

//index.js //获取应用实例 const app = getApp() Page({   data: {     calculation:"",     result:0,     character:[],  // 运算符号     operand: [],    // 数字     temp:false   },   // 输入框输入数据   add:function(e) {     let input = e.currentTarget.dataset.text;     var that = this;     if (input == '+' || input == '-' || input == '*' || input == '/') {       this.data.temp = false; // 用于记录上一次是否是操作符       var item = 'character[' + this.data.character.length+ ']';       this.setData({         [item] :input       })      } else {       var item = 'operand['+this.data.operand.length+']';             if(that.data.temp) {         // 拿到前一个的值         var res = 'operand[' + (this.data.operand.length-1) + ']'                  var ress= that.data.operand.length-1;         var xyz = that.data.operand[ress] * 10 + parseInt(input);         that.setData({           [res]:xyz         })       } else {         input = parseInt(input);         that.data.temp = true;         that.setData({           [item]: input         })       }     }     // 将所有的内容放到显示框中     this.setData({       calculation:this.data.calculation+input     })   },   // 计算答案   res:function() {     console.log(this.data.character.length);     console.log(this.data.operand.length)     var character_len =  this.data.character.length ;     var operand_len = this.data.operand.length;     console.log(operand_len - character_len)     if(operand_len - character_len == 1) {       this.data.result = this.data.operand[0];       console.log("初始值"+this.data.result);       for(var i=0;i<character_len;i++) {         if(this.data.character[i] == '+') {           this.data.result = this.data.result + this.data.operand[i + 1];         }         if (this.data.character[i] == '-') {           this.data.result = this.data.result - this.data.operand[i + 1];         }         if (this.data.character[i] == '*') {           this.data.result = this.data.result * this.data.operand[i + 1];         }         if (this.data.character[i] == '/') {           this.data.result = this.data.result / this.data.operand[i + 1];         }                }     } else {       this.setData({         result:'输入有误，清空数据，重新输入'       })     }     this.setData({      calculation:this.data.result     })   },   // 清空屏幕   empty:function() {     this.setData({       calculation: "",       result: 0,       character: [],  // 运算符号       operand: [],    // 数字       temp: false     }   } })

以上是“微信小程序如何实现简单的计算器功能”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！