微信小程序-计算器

最新推荐文章于 2020-07-01 12:21:50 发布

原创最新推荐文章于 2020-07-01 12:21:50 发布 · 3.2k 阅读

5 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

13 篇文章

订阅专栏

初次尝试小程序，简单的实现计算器功能

首先：WXML结构

<view class="content">
  <view class="show-con">
    <view class="result">{{msg}}</view>
  </view>
  <view class="btn-group">
    <view class="item" bindtap='getContent' id="{{id1}}">AC</view>
    <view class="item"  bindtap='getContent' id="{{id2}}">+/-</view>
    <view class="item"  bindtap='getContent' id="{{id3}}">%</view>
    <view class="item  orange" bindtap='getContent' id="{{id4}}">÷</view>
  </view>
  <view class="btn-group">
    <view class="item" bindtap='getContent' id="{{id5}}">7</view>
    <view class="item" bindtap='getContent' id="{{id6}}">8</view>
    <view class="item" bindtap='getContent' id="{{id7}}">9</view>
    <view class="item orange" bindtap='getContent' id="{{id8}}">x</view>
  </view>
  <view class="btn-group">
    <view class="item" bindtap='getContent' id="{{id9}}">4</view>
    <view class="item" bindtap='getContent' id="{{id10}}">5</view>
    <view class="item" bindtap='getContent' id="{{id11}}">6</view>
    <view class="item orange" bindtap='getContent'  id="{{id12}}">-</view>
  </view>
  <view class="btn-group">
    <view class="item" bindtap='getContent' id="{{id13}}">1</view>
    <view class="item" bindtap='getContent'id="{{id14}}">2</view>
    <view class="item" bindtap='getContent'id="{{id15}}">3</view>
    <view class="item orange" bindtap='getContent' id="{{id16}}">+</view>
  </view>
   <view class="btn-group">
    <view class="item zero" bindtap='getContent' id="{{id17}}">0</view>
    <view class="item" bindtap='getContent' id="{{id18}}">.</view>
    <view class="item orange" bindtap='getContent' id="{{id19}}">=</view>
  </view>
</view>

其次，WXSS css表现

/* pages/new/new.wxss */
.content{
  width:100%;
  display: flex;
  flex-direction: column;
  align-items: item;
  box-sizing: border-box
}
.show-con{
  display: flex;
  flex-direction: row;
  height: 200rpx;
  background: #000;
  border-radius: 10rpx
}
.result{
  height: 300rpx;
  width: 100%;
  color: #fff;
  font-size: 40rpx;
  text-align: right;
  line-height: 300rpx;
}
.btn-group{
  display: flex;
  flex-direction: row;
  width: 700rpx;
  margin:10rpx 20rpx 0rpx 20rpx
}
.item{
  display: inline-block;
  width: 160rpx;
  height: 160rpx;
  background: #ccc;
  border-radius: 50%;
  text-align: center;
  line-height: 160rpx;
  margin: 8.75rpx
}
.orange{
  color:#fff;
  background:#ffd700;
  font-weight: bold
}
.zero{
   width: 337.5rpx;
   border-radius: 80rpx
}

最后，js交互

const util = require('../../utils/util.js')
const rpn = require('../../utils/rpn.js')
Page({
  data:{
    msg:'0',
    id1:'AC',
    id2:'+/-',
    id3:'%',
    id4:'÷',
    id5:'7',
    id6:'8',
    id7:'9',
    id8:'*',
    id9:'4',
    id10:'5',
    id11:'6',
    id12:'-',
    id13:'1',
    id14:'2',
    id15:'3',
    id16:'+',
    id17:'0',
    id18:'.',
    id19:'=',
  },
  getContent:function(e){
    var id = e.target.id;
    var initData = this.data.msg;
    if (id == this.data.id1){
      this.setData({
        msg: 0
      });
    }else if( id == this.data.id2){//取反
      if (initData == "0"){
          return
      }
      var firstWord = initData.charAt(0);
      if (firstWord == "-"){
        initData = initData.substr(1);
      }else{
        initData = "-" + initData;
      }
      this.setData({
        msg: initData
      });
    }else if(id == this.data.id3){//百分比运算
      if (initData == 0){
        return;
      }else{
        initData = initData/100;
        this.setData({
          msg: initData
        });
      }
    }else if( id == this.data.id19){
      //如果只有一个数字且是0，则直接返回
      if( initData == 0){
        return;
      }
      //判断最后一位是否为是有效数字
      var lastWord = initData.charAt(initData.length - 1);
      if (isNaN(lastWord)) {
        return;
      }
      var calData = rpn.calCommonExp(initData);
      console.log(calData);
      this.setData({
        msg: calData
      });
    }
    else{
      var total;
      if (initData == 0){
        total = id
      }
      else{
        total = initData + id;
      }
      this.setData({
        msg: total
      });
    }
  }
})