<!--index.wxml-->

<view class="result">

  <view class="result-num">{{num}}</view>

  <view class="result-op">{{op}}</view>

</view>

<view class="btns">

  <view>

    <!-- hover-class，实现点击态效果

    hover-class样式显示的原理是 点击时把样式加到class的样式中，冲突时，谁在后面就显示谁!

    data-val:用于传数据，e.target.dataset.val调用

    -->

    <view hover-class="bg" bindtap="resultBtn">C</view>

    <view hover-class="bg" bindtap="delBtn">DEL</view>

    <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>

    <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>

  </view>

  <view>

    <view hover-class="bg" bindtap="numtBtn" data-val="7">7</view>

    <view hover-class="bg" bindtap="numtBtn" data-val="8">8</view>

    <view hover-class="bg" bindtap="numtBtn" data-val="9">9</view>

    <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>

  </view>

  <view>

    <view hover-class="bg" bindtap="numtBtn" data-val="4">4</view>

    <view hover-class="bg" bindtap="numtBtn" data-val="5">5</view>

    <view hover-class="bg" bindtap="numtBtn" data-val="6">6</view>

    <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>

  </view>

  <view>

    <view hover-class="bg" bindtap="numtBtn" data-val="1">1</view>

    <view hover-class="bg" bindtap="numtBtn" data-val="2">2</view>

    <view hover-class="bg" bindtap="numtBtn" data-val="3">3</view>

    <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>

  </view>

  <view>

    <view hover-class="bg" bindtap="numtBtn" data-val="0">0</view>

    <view hover-class="bg" bindtap="dotBtn">.</view>

    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>

  </view>

</view>

/**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{  /* 这里的view纵向排列*/

  flex: 1;

  display: flex;   /* 设置为弹性布局 */

}

.btns > view > view{   /* 这里的view横向排列*/

  flex-basis: 25%;   /*flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。*/

  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: #f00;

}

.btns > view >view:last-child{  /*每一行的最后一个元素*/

  color: #fc8e00;

}

/* ------------------------------ */

/* 显示器样式 ：数字、运算符显示的位置*/

.result{

  flex: 1;

  background: #f3f6fe;

  position: relative;

}

.result-num{

  position: absolute;

  font-size: 27pt;

  bottom: 5vh;

  right: 3vw;

}

.result-op{

  font-size: 20pt;

  position: absolute;

  bottom: 1vh;  /* vh：视窗高度，1vh等于视窗高度的1% ; 视窗高度固定为100vh*/

  right: 3vw;  /* vw 视窗宽度，1vw等于视窗宽度的1% ;  视窗宽度度固定为100wh*/

}

{

  "navigationBarBackgroundColor":"#fff",

  "navigationBarTitleText":"计算器",

  "navigationBarTextStyle":"black",

  "usingComponents": {}

}

// index.js

// 获取应用实例

const app = getApp()

Page({

  data: {

    num:"1",

    op:"+"

  },

  result:null,

  isClear:false, /*true:替换当前数字 false:新数字接在当前数字末尾 */

  numtBtn:function(e){

    var num = e.target.dataset.val

    if(this.data.num == '0' || this.isClear){

      // 数字替换

      this.setData({num:num})

      this.isClear = false

    }else{

      // 数字拼接

      this.setData({num:this.data.num + num})

    }

  },

  opBtn:function(e){

    var op = this.data.op  //取出用户上一次输入的运算符

    var num = Number(this.data.num) //Number()会得到数字（整数,小数)或者NaN; parseInt()会得到 整数或者NaN，不会有小数的情况

    this.setData({op:e.target.dataset.val})  // 赋值这一次用户输入的运算符

    if(this.isClear){

      return

    }

    this.isClear = true

    if(this.result == null){

      this.result = num

      return

    }

    if(op == '+'){

      this.result = this.result + num

    }else if(op == '-'){

      this.result = this.result - num

    }else if(op == '*'){

      this.result = this.result * num

    }else if(op == '/'){

      this.result = this.result / num

    }else if(op == '%'){

      this.result = this.result % num

    }

    this.setData({num:this.result + ''}) // 数字转换为字符串

  },

  dotBtn:function(){

    if(this.isClear){

      this.setData({num:'0.'})

      this.isClear  = false

      return

    }

    if(this.data.num.indexOf('.') >= 0){  //string.indexOf("ABC")：返回大于等于0的整数值则表示包含此字符串，若不包含则返回-1

      return

    }

    this.setData({num:this.data.num + '.'})

  },

  delBtn: function(){

    // stringObject.substr(start,length) :substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。

    var num = this.data.num.substr(0, this.data.num.length - 1)

    this.setData({num:num == '' ? '0' : num})

  },

  resultBtn: function(){

    this.result = null

    this.isClear = false

    this.setData({num: '0', op:''})

  },

})