小程序计算器一个

wxml：

<view class="calculator-container">
  <!-- 标题 -->
  <view class="cal-title">
    <view class="cal-title-h1">CALCULATOR</view>
    <view class="cal-title-h2">-小桐桐计算器-</view>
  </view>
  <!-- 计算器显示框 -->
  <view class="cal-show">
    <view class="cal-show-up">{
  {expression}}</view>
    <view class="cal-show-down">{
  {result}}</view>
  </view>
  <!-- 键盘输入框 -->
  <view class="cal-keyboard">
    <!-- 第一行 -->
    <view class="keyboard-tr1">
      <view class="key tr1-td1" id="clearRem" bindtap="bindClearRem">MC</view>
      <view class="key tr1-td2" id="addRem" bindtap="bindAddToRem">MR</view>
      <view class="key tr1-td3" id="clear" bindtap="bindClickButton">C</view>
      <view class="key tr1-td4" id="back" bindtap="bindClickButton">CE</view>
    </view>
    <!-- 第二行 -->
   <view class="keyboard-tr2">
      <view class="key tr2-td1" id="addRem"  bindtap="bindAddUpRem">M+</view>
      <view class="key tr2-td2" id="lessRem"  bindtap="bindLessRem">M-</view>
      <view class="key tr2-td3" id="rem"  bindtap="bindClickButton">%</view>
      <view class="key tr2-td4" id="div"  bindtap="bindClickButton">/</view>
    </view>
    <!-- 第三行 -->
    <view class="keyboard-tr3">
      <view class="key tr3-td1" id="7" bindtap="bindClickButton">7</view>
      <view class="key tr3-td2" id='8' bindtap="bindClickButton">8</view>
      <view class="key tr3-td3" id="9" bindtap="bindClickButton">9</view>
      <view class="key tr3-td4" id="mul" bindtap="bindClickButton">X</view>
    </view>
    <!-- 第四行 -->
    <view class="keyboard-tr4">
      <view class="key tr4-td1" id="4" bindtap="bindClickButton">4</view>
      <view class="key tr4-td2" id="5" bindtap="bindClickButton">5</view>
      <view class="key tr4-td3" id="6" bindtap="bindClickButton">6</view>
      <view class="key tr4-td4" id="less" bindtap="bindClickButton">-</view>
    </view>
    <!-- 第五行 -->
    <view class="keyboard-tr5">
      <view class="tr5-left">
        <view class="tr5-tr1">
          <view class="key2 tr5-tr1-td1" id="1" bindtap="bindClickButton">1</view>
          <view class="key2 tr5-tr1-td2" id="2" bindtap="bindClickButton">2</view>
          <view class="key2 tr5-tr1-td3" id="3" bindtap="bindClickButton">3</view>
        </view>
        <view class="tr5-tr2">
          <view class="key2 tr5-tr2-td1" id="0" bindtap="bindClickButton">0</view>
          <view class="key2 tr5-tr2-td2" id="dot" bindtap="bindClickButton">.</view>
          <view class="key2 tr5-tr2-td3" id="equal" bindtap="bindEqual">=</view>
        </view>
      </view>
      <view class="tr5-right" id="add" bindtap="bindClickButton"> +</view>
    </view>
  </view>
</view>

wxss:

/**index.wxss**/
@import '../../style/font_led.wxss';

.calculator-container{
  position: fixed;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  margin: 10rpx 10rpx;
  padding: 0 35rpx;
  box-shadow: 2rpx 2rpx 2rpx 2rpx rgb(177, 168, 168);
  background-color: rgba(89, 89, 89,0.4);
}

.cal-title{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30rpx 0;

}
.cal-title-h1{
  font-size: 70rpx;
  color: #f2f2f2;
}
.cal-title-h2{
  font-size: 30rpx;
  color: #8c8c8c;
}

/****************************** show ********************************************/
.cal-show{
  width: 100%;
  height: 200rpx;
  background-color: #000;
  border-radius: 15rpx;
  color: #fff;
  box-sizing: border-box;
  font-family: LED;
  box-shadow: 1px 1px 3px rgba(242, 242, 242,0.5);
}
.cal-show-up{
  width: 100%;
  height: 40%;
  text-align: left;
  padding-right: 20rpx;
  box-sizing: border-box;
  line-height: 80rpx;
  font-size: 60rpx;
}
.cal-show-down{
  width: 100%;
  height: 60%;
  
  text-align: right;
  padding-right: 20rpx;
  line-height: 120rpx;
  box-sizing: border-box;
  font-size: 110rpx;
  overflow: hidden;
}
.cal-show-text{
  width: 100%;
  height: 100%;
  background-color: red;

}

/* keyboard */

.cal-keyboard{
  width: 100%;
  padding: 30rpx 0;
}
.keyboard-tr1, .keyboard-tr2, .keyboard-tr3, .keyboard-tr4 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-top: 20rpx;
}

.key{
  width: 20%;
  height: 100rpx;
  border-radius: 10rpx;
  color: #bfbfbf;
  font-size: 40rpx;
  text-align: center;
  line-height: 100rpx;
  box-shadow: 5rpx 5rpx  #000;
  background-image: linear-gradient(#404040	, #0d0d0d,#000,#0d0d0d,#404040	)
}

.key:active{
  background: #000;
  font-size: 60rpx;
  color: #9999ff;
}
.key2:active{
  background: #000;
  font-size: 60rpx;
  color: #9999ff;
}
.keyboard-tr5{
  width: 100%;
  height: 200rpx;
  clear: both;

}

.tr5-left{
  float: left;
  width: 73.33%;


}
.tr5-right{
  float: right;
  width: 20%;
  background-color: blue;
}
.tr5-tr1, .tr5-tr2{
  padding-top: 20rpx;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.key2{

  width: 27.77%;
  height: 100rpx;
  border-radius: 10rpx;
  color: #bfbfbf;
  text-align: center;
  line-height: 100rpx;
  box-shadow: 5rpx 5rpx  #000;
  background-image: linear-gradient(#404040	, #0d0d0d,#000,#0d0d0d,#404040	)
}
.tr5-right{
  margin-top: 20rpx;
  height: 220rpx;
  border-radius: 10rpx;
  color: #bfbfbf;
  text-align: center;
  line-height: 220rpx;
  box-shadow: 5rpx 5rpx  #000;
  background-image: linear-gradient(#404040	, #0d0d0d,#000,#0d0d0d,#404040	)
}

.tr5-right:active{
  background: #000;
  font-size: 60rpx;
  color: #9999ff;
}

 

js:

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    result:'0',         //showDwon
    expression:'',    //showUp

    dotFlag:false, //小数点标记

    equalFlag: true,
  },
  //事件处理函数

  bindClickButton: function(e){
    // 获取键盘字符
   var str = e.currentTarget.id;

   var res = this.data.result;

  // 保证每次数只有一个小数点
   var dotFlag = this.data.dotFlag;

   // 判断字符是否数字, js中字符与数字比较，字符自动转换为数字，不能转换的输出NaN；
    if( str >= '0' && str <= '9'){

      if(res === '0' || !this.data.equalFlag ){
        res =  str;
      }else{
        res  += str;
      }
      this.setData({
        result: res,
        expression:'',
        equalFlag:true
      })
    } else if( str == 'dot' && !dotFlag && !isNaN(res.charAt(res.length-1)) ){

      this.data.result += '.';
      this.setData({
        result: this.data.result,
        dotFlag: true
      });
    } else if( str == 'clear' ){
      this.setData({
        expression: '',
        result : '0'
      });
    } else if( str == 'back'){
      if( res.length > 1){
        res = res.substr(0,res.length-1);
      }else{
        res = '0'
      }
      this.setData({
        result : res
      })
    } else if( str == "add" || str == "less" || str == "mul" || str ==