微信小程序实验三 ——— 带全键盘计算器

四则运算计算器

仿手机计算器

实验题目：

实现如下功能按键的一个简单计算器。加减乘除这些基本运算功能必须有，有能力的话你可以实现按优先级先后顺序的表达式运算。

能力训练：

（1）界面布局。即如何创建并排列这些按键；

（2）事件共用。以前学习的是一个按钮对应一个单击事件，这里可以尝试将多个按钮绑定到一个单击事件函数上，然后再函数内通过传入的参数区分是哪个按钮，这样能大大缩减代码量。

（3）字符串处理能力。计算器屏幕只有一个，却要按照先后顺序输入两个以上运算数，最后还要显示运算结果，这里将会用到很多js语言中的字符串处理函数。

实验效果：

程序优势：

1，可以进行四则运算

2，可以进行小数运算

3，可以以字符串形式展示，并给出运算结果

4，复位，删除，等号确认 键的使用不会导致后续运算异常

5，对 小数点，运算符，0 的可能异常输入进行了处理

程序代码：

index.js

//index.js
//获取应用实例
const app = getApp()
Page({
  data: {
    num:'',
    op:'' 
  },

 result: 0,   //记录结果
  isClear: false, // 记录运算符前是否有数字
  temp:'', // 记录每次输入的值
  flag:false, // 记录是否使用小数点
  equalFlag:false, // 记录是否使用等号归零
 numBtn: function(e) {
   if(this.equalFlag){
     this.data.num =''
      this.equalFlag = false
   }
    var num = e.target.dataset.val
    if(this.flag){
      this.temp =Number(0+'.'+num) 
    }else{
      this.temp =Number(this.temp+num) 
    }
    this.flag=false
    if(this.result ==  0){
       this.result = this.temp
       this.flag = false
    }
 //如果本身是0，那么输入别的数字时，                     //就将其替换而不是粘连
if(this.data.num == '0') {
this.setData({ num: num})
}
else if(this.data.num != '0'){
  this.setData({ num: this.data.num + num })
  if(this.data.op != ''){
    if(this.data.op == '+'){
      this.result += this.temp
    }
    else if(this.data.op == '-'){
      this.result -= this.temp
    }
    else if(this.data.op == '*'){
      this.result *= this.temp
    }
    else if(this.data.op == '/'){
      this.result /= this.temp
    }
    else if(this.data.op == '%'){
      this.result %= this.temp
    }
    this.setData({result: this.result})
  }

  
}
   this.isClear = true 
 },
 opBtn: function (e) {
   
 var op = e.target.dataset.val
 var numTmp = this.data.num.substr(0,this.data.num.length - 1)
 
 if (this.data.num == '' && !this.isClear) {
     return
}
// 如果前面有数字，并且输入两个符合，则删去第一个符合
// 删去第一个符号后，把第二个符号放在原位置 
 if( this.data.num != '' && !this.isClear ){
     this.setData({num: numTmp})
 }

   if(op != '='){
    this.setData({ num: this.data.num  +              e.target.dataset.val})
   }
      if(op == '='){
        this.setData({num: this.result,op:'',temp:'', flag:false,result:0})
        this.equalFlag = true
      }
 this.isClear = false

    this.temp =''   

 if (op == '+') {
   this.data.op = '+'
 }
  else if (op == '-') {
    this.data.op = '-'
   }
    else if (op == '*'){
    this.data.op = '*'
  }
    else if (op =='/'){
  this.data.op = '/'
}
  else if (op == '%'){
    this.data.op = '%'
  }
 },

  dotBtn: function () {
    if(this.data.num == ''){
      return
    }
    if (!this.isClear){
      return
  }
     this.flag = true
      this.setData({ num: this.data.num+'.'})
  },
 delBtn: function() {
 var num = this.data.num.substr(0,this.data.num.length - 1)
this.setData({ num: num === ''?'' : num ,result:''})
 },
 resetBtn: function () {
    this.isClear = false
    this.setData({ num: '', result: '',op: '' })
  },
})

index.json

{
 
  "usingComponents": {},
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "计算器",
  "navigationBarTextStyle": "black"
}

 index.wxml

{{num}}
{{result}}



C
÷
*
DEL



 7
8
9
%


4
5
6
-


1
2
3
+


0
.
=

index.wxss

/**index.wxss**/


page{
  display: flex;
  flex-direction: column;
  height: 100%
}
.result{
  flex: 1;
  background: #f3f6fe;
}
.btns{
  flex: 1;
}

.bg{
background: #eee;
}

.btns {
flex: 1;
display: flex;
flex-direction: column;
font-size: 17pt;
border-top: 1rpx solid #ccc;
border-left: 1rpx solid #ccc;
}

.btns > view{
  flex: 1;
  display: flex;
}

.btns > view > view {
flex-basis: 25%;
border-right: 1rpx solid #ccc;
border-bottom: 1rpx solid #ccc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}

.btns > view:last-child > view:first-child {
 flex-basis: 50%;
}
 .btns > view:first-child > view:first-child{
 color:rgb(54, 29, 29);
 }

 .btns > view > view:last-child {
color: #fc8e00;
 }
 .result{
   display: flex;
   flex: 1;
   background: #9bcc14;
   position: relative;
 }
 .result-num {
   position: absolute;
   font-size: 27pt;
   bottom: 5vh;
   right: 3vw;
   padding-bottom: 20px;
 }
 .result-op {
   font-size: 22pt;
   position: absolute;
   bottom: 1vh;
   right: 3vw;
   color: rgb(201, 25, 25);
 }