小程序之加减乘除

使用微信小程序写了一个加减乘除的运算，看效果能去微信搜

“吃盖浇饭”

image.png

下面上代码

js文件

Page({  /**   * 页面的初始数据   */  data: {    id1:'退格',    id2: 'back',    id3:'0',    id4:'+',    id5:'9',    id6: '8',    id7: '7',    id8: '-',    id9: '6',    id10: '5',    id11: '4',    id12: '/',    id13: '3',    id14: '2',    id15: '1',    id16: '=',    screenData:"0",    lastIspast:"",    str:[]  },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {      },  /**   * 生命周期函数--监听页面首次渲染完成   */  onReady: function () {      },  /**   * 生命周期函数--监听页面显示   */  onShow: function () {      },  /**   * 生命周期函数--监听页面隐藏   */  onHide: function () {      },  /**   * 生命周期函数--监听页面卸载   */  onUnload: function () {      },  /**   * 页面相关事件解决函数--监听使用户下拉动作   */  onPullDownRefresh: function () {      },  /**   * 页面上拉触底事件的解决函数   */  onReachBottom: function () {      },  /**   * 使用户点击右上角分享   */  onShareAppMessage: function () {      },  history: function(){    // wx.navigateTo({    //   // url: 'https://www.baidu.com/'    // })  },  clickButton: function(event) {    console.log(event.target.id);    var sd = this.data.screenData;    var id = event.target.id    if(id==this.data.id1){      var data = this.data.screenData;      if(data == 0 ){        return      }      data = data.substring(0,data.length-1);      if(data == "" || data == "-"){        data = 0;      }      this.setData({screenData:data});    }else if(id == this.data.id2){      this.setData({        screenData:"0"      })    } else if (id == this.data.id3){      this.setData({        screenData: "0"      })    } else if (id == this.data.id16){          var data = this.data.screenData;      if(data==0){        return;      }      var lastWrod = data.substring(data.length-1,data.lentgh);      if(isNaN(lastWrod)){        return      }      var num = "";      var lastOperator;      var arr = this.data.screenData.split("");      var optarr = [];      for(var i in arr){        if(isNaN(arr[i])==false){          num+=arr[i];        }else{          lastOperator = arr[i];          optarr.push(num);          optarr.push(arr[i]);          num=""        }      }      optarr.push(Number(num));      var result = Number(optarr[0])*1.0;      console.log(result)      for(var i=1;i<optarr.length;i++){        if (isNaN(optarr[i])){          if(optarr[1]==this.data.id4){            result+=Number(optarr[i+1])          } else if (optarr[1] == this.data.id8){            result -= Number(optarr[i + 1])          } else if (optarr[1] == this.data.id12){            result /= Number(optarr[i + 1])          }        }      }      this.data.str.push(result);      wx.setStorageSync('key', this.data.str)      console.log(wx.getStorageSync('key'))      this.setData({        screenData: result+""      })    }else{      var data;      if (sd == 0) {        data = id;      } else {        data = sd + id;      }      this.setData({        screenData: data      })    }     }})

wxml文件

<view class="content">  <view class="screen">    {{screenData}}  </view>  <view class='btnGroup'>      <view class='item orange' bindtap="clickButton" id="{{id1}}">退格</view>       <view class='item orange' bindtap="clickButton" id="{{id2}}">清屏</view>        <view class='item orange' bindtap="clickButton" id="{{id3}}">0</view>         <view class='item orange' bindtap="clickButton" id="{{id4}}">+</view>  </view>   <view class='btnGroup'>      <view class='item orange' bindtap="clickButton" id="{{id5}}">9</view>       <view class='item orange' bindtap="clickButton" id="{{id6}}">8</view>        <view class='item orange' bindtap="clickButton" id="{{id7}}">7</view>         <view class='item orange' bindtap="clickButton" id="{{id8}}">-</view>  </view>   <view class='btnGroup'>      <view class='item orange' bindtap="clickButton" id="{{id9}}">6</view>       <view class='item orange' bindtap="clickButton" id="{{id10}}">5</view>        <view class='item orange' bindtap="clickButton" id="{{id11}}">4</view>         <view class='item orange' bindtap="clickButton" id="{{id12}}">/</view>  </view>   <view class='btnGroup'>      <view class='item orange' bindtap="clickButton" id="{{id13}}">3</view>       <view class='item orange' bindtap="clickButton" id="{{id14}}">2</view>        <view class='item orange' bindtap="clickButton" id="{{id15}}">1</view>         <view class='item orange' bindtap="clickButton" id="{{id16}}">=</view>  </view>   <view>      <view bindtap="history">          想整拼图，可惜失败了      </view>   </view> </view>

wxss文件

.content{  height: 100%;  display: flex;  flex-direction: column;  align-items: center;  box-sizing: border-box;}.screen{  background-color: #fff;  border-radius:3px;  text-align: center;  width: 720rpx;  height: 100rpx;}.btnGroup{  display:flex;  flex-direction: row}.item{  width:160rpx;  min-height: 150rpx;  margin:10px;  text-align: center;  line-height: 150rpx;}

完工。