微信小程序之计算器/求平均分

cal.js
Page({
  data: {
    id1: "clear",//清除
    id2: "back",//回退
    id3: "history",
    id4: "div",//除号
    id5: "num_7",
    id6: "num_8",
    id7: "num_9",
    id8: "mul",//乘号
    id9: "num_4",
    id10: "num_5",
    id11: "num_6",
    id12: "sub",//减号
    id13: "num_1",
    id14: "num_2",
    id15: "num_3",
    id16: "add",
    id17: "num_0",
    id18: "dot",//小于号
    id19: "equals",//等于号
    
    result: "0",
    dotSign: false,//是否加小数点标志
  },

  clickButton: function(e) {
    console.log(e);//输出事件对象
    var btnValue = e.target.id;//获取按钮值
    var res = this.data.result;//获取结果值
    var newDotSign = this.data.dotSign;
    if(btnValue>="num_0" && btnValue<="num_9") {
      var num = btnValue.split('_')[1];//字符串的分割
      if (res == "0" || res.charAt(res.length - 1) =='∞') {
        res = num;
      }else {
        res = res+num;
      }
    }else {
      if(btnValue == "dot") {//小数点
        if(!newDotSign) {
          res = res+'.';
          newDotSign = true;
        }
      }else if(btnValue == "clear") {//清除
        res = "0";
        newDotSign = false;
      }else if(btnValue == "back") {//回退
        var length = res.length;
        if(length>1) {
          res = res.substr(0,length-1);//如果长度大于1舍去最后一个字符
        }else {
          res = "0";
        }
      }else if(btnValue == "add" || btnValue == "sub" || btnValue == "mul" || btnValue == "div") {
        newDotSign  = false;
        var sign;
        switch(btnValue) {
          case "add":
            sign = '+';
            break;
          case "sub":
            sign = '-';
            break;
          case "mul":
            sign = '*';
            break;
          case "div":
            sign = '/';
            break;
        }
        if(!isNaN(res.charAt(res.length-1))) { //判断最后一个字符是不是数字，如果是数字就加符号，不是数字就不加
          res = res + sign;
        }
        
      } 
    }

    this.setData({
      result: res,
      dotSign: newDotSign
    });
  },

  equals: function() {
    var str = this.data.result;//获取结果值
    var strArr = [];
    var item = '';
    var temp = 0;
    for(var i=0;i<=str.length;i++) {
      var ch = str.charAt(i);
      if (ch == '=') {//如果字符串为  =5+4-5*8  这种样式第一项遇到等号就跳过这次循环
        continue;
      }
      if((ch!='' && ch>=0 && ch<=9) || ch == '.') {
        item = item+ch;
      }else {
        strArr[temp] = item;
        temp++;
        strArr[temp] = ch;
        temp++;
        item = '';
      }
    }
    
    if(isNaN(strArr[strArr.length-1])) {
      strArr.pop();//如果最后一项是符号就将其舍去
    }

    var res = strArr[0]*1;//将字符串转换为数值
    var num;
    for(var i=1;i<strArr.length;i=i+2) {//访问符号需要每隔一空，所以设i=i+2
      if (res == '∞') {
        break;
      }
      num = strArr[i+1]*1;
      switch(strArr[i]) {
        case '+':
          res = res+num;
          break;
        case '-':
          res = res-num;
          break;
        case '*':
          res = res*num;
          break;
        case '/':
          if(num != 0) {
            res = res / num;
          }else {
            res = '∞';
          }
          break;
      }
    }

    this.setData({
      result: '='+res
    });
    
  }
  
})

cal.wxml
<view class='screen'>

  <view>{{result}}</view>

</view>

<view class='bottom'>

  <view class="btnGroup">
    <button id="{{id1}}" bindtap='clickButton' hover-class='shadow' class='btn-item gray'>清除</button>
    <button id="{{id2}}" bindtap='clickButton' hover-class='shadow' class='btn-item gray'>回退</button>
    <button id="{{id3}}" bindtap='clickButton' hover-class='shadow' class='btn-item gray'>
      <icon type='waiting' size='30' color='#999'></icon>
    </button>
    <button id="{{id4}}" bindtap='clickButton' hover-class='shadow' class='btn-item orange'>/</button>
  </view>

  <view class="btnGroup">
    <button id="{{id5}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>7</button>
    <button id="{{id6}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>8</button>
    <button id="{{id7}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>9</button>
    <button id="{{id8}}" bindtap='clickButton' hover-class='shadow' class='btn-item orange'>*</button>
  </view>

  <view class="btnGroup">
    <button id="{{id9}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>4</button>
    <button id="{{id10}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>5</button>
    <button id="{{id11}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>6</button>
    <button id="{{id12}}" bindtap='clickButton' hover-class='shadow' class='btn-item orange'>-</button>
  </view>

  <view class="btnGroup">
    <button id="{{id13}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>1</button>
    <button id="{{id14}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>2</button>
    <button id="{{id15}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>3</button>
    <button id="{{id16}}" bindtap='clickButton' hover-class='shadow' class='btn-item orange'>+</button>
  </view>

  <view class="btnGroup">
    <button id="{{id17}}" bindtap='clickButton' hover-class='shadow' class='btn-item zero white'>0</button>
    <button id="{{id18}}" bindtap='clickButton' hover-class='shadow' class='btn-item white'>.</button>
    <button id="{{id19}}" bindtap='equals' hover-class='shadow' class='btn-item orange'>=</button>
  </view>

</view>

cal.wxss
page {
  background: #000;
}

.screen {
  position: fixed;
  bottom: 780rpx;
  word-wrap: break-word;
  width: 750rpx;
}
.screen view {
  color: #fff;
  font-size: 30px;
  text-align: right;
  margin-right: 30rpx;
}


.btnGroup {
  display: flex;
  flex-direction: row
}

.btn-item {
  width: 189rpx;
  text-align: center;
  line-height: 150rpx;
  border-radius: 0;
}
.zero {
  width: 376rpx;
}

icon {
  position: absolute;
  left: 55rpx;
  top: 37rpx;
}

.white {
  background: #EFEFED;
}
.orange {
  background: #FC9504;
}
.gray {
  background: #CFCFCF;
}
.bottom {
  position: fixed;
  bottom: 0;
}

button::after {
  border-radius: 0;
}

.shadow {
  background: #999;
}

{
  "pages":[
    "pages/index/index",
    "pages/cal/cal"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "",
    "navigationBarTextStyle":"black"
  },

  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "./img/index.png",
        "selectedIconPath": "./img/indexFull.png"
      },
      {
        "pagePath": "pages/cal/cal",
        "text": "分类",
        "iconPath": "./img/sort.png",
        "selectedIconPath": "./img/sortFull.png"
      },
      {
        "pagePath": "pages/test3/test3",
        "text": "购物车",
        "iconPath": "./img/cart.png",
        "selectedIconPath": "./img/cartFull.png"
      },
      {
        "pagePath": "pages/my/my",
        "text": "我的",
        "iconPath": "./img/my.png",
        "selectedIconPath": "./img/myFull.png"
      }
    ]
  }

}

跳转页面

Page({

  data: {
    name: '',
    chineseScore: '',
    mathScore: '',
    avg: '',
    flag: true
  },

  input1: function(e) {
    var input = e.detail.value;
    this.setData({
      name: input
    });
  },
  input2: function(e) {
    var input = e.detail.value;
    if(!isNaN(input)) {
      this.setData({
        chineseScore: input
      });
    }
  },

  input3: function (e) {
    console.log(e);
    var input = e.detail.value;
    if (!isNaN(input)) {
      this.setData({
        mathScore: input
      });
    }
  },

  test: function() {
    if(this.data.name==''||this.data.chineseScore==''||this.data.mathScore=='') {
      return;
    }

    var result = (this.data.chineseScore*1+this.data.mathScore*1)/2;
    console.log(result);
    this.setData({
      avg: result,
      flag: false
    });
  }
  
})

{
  "navigationBarBackgroundColor": "#4CD0F1",
  "navigationBarTextStyle": "white",
  "navigationBarTitleText": "案例",
  "enablePullDownRefresh": true,
  "backgroundColor": "#000"
}

<input bindinput='input1' placeholder="请输入你的名字" placeholder-class="placeholder"></input>
<input bindinput='input2' placeholder="请输入你的语文成绩" placeholder-class="placeholder"></input>
<input bindinput='input3' placeholder="请输入你的数学成绩" placeholder-class="placeholder"></input>
<button bindtap='test' type='primary'>提交</button>

<view class='content' hidden='{{flag}}'>
  <view class='content-item'>姓名：{{name}}</view>
  <view class='content-item'>语文成绩：{{chineseScore}}</view>
  <view class='content-item'>数字成绩：{{mathScore}}</view>
  <view class='content-item'>平均分:{{avg}}</view>
</view>

page {
  background: #F1F0F6;
}
.placeholder {
  font-size: 15px;

}

input {
  background: #fff;
  height: 100rpx;
  margin-bottom: 1px;
  padding-left: 20rpx;
}
button {
  margin: 30rpx 50rpx;
}

.content {
  background: #fff;
}
.content-item {
  padding: 20rpx;
}