微信小程序——计算器

知识点：

wxml:

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

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

js:

Number()会得到数字（整数,小数)或者NaN; parseInt()会得到 整数或者NaN，不会有小数的情况

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

string.indexOf("ABC")：返回大于等于0的整数值则表示包含此字符串，若不包含则返回-1

index.wxml:

<!--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

/**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*/
}

index.json

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

index.js

// 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:''})
  },
  
})

效果