初学者可以试试——微信小程序实现简单计算器

欢迎关注，敬请点赞！

wxml代码(类同于html)

• 分为content框，显示框
• cl-item类，按钮
• cl-row类，按钮“行编组”

<view class="content">{{content}}</view>
<view class="cl-row">
  <view class='cl-item' bindtap="numtap" data-name="1">1</view>
  <view class='cl-item' bindtap="numtap" data-name="2">2</view>
  <view class='cl-item' bindtap="numtap" data-name="3">3</view>
</view>

<view class="cl-row">
  <view class='cl-item' bindtap="numtap" data-name="4">4</view>
  <view class='cl-item' bindtap="numtap" data-name="5">5</view>
  <view class='cl-item' bindtap="numtap" data-name="6">6</view>
</view>

<view class="cl-row">
  <view class='cl-item' bindtap="numtap" data-name="7">7</view>
  <view class='cl-item' bindtap="numtap" data-name="8">8</view>
  <view class='cl-item' bindtap="numtap" data-name="9">9</view>
</view>

<view class="cl-row">
  <view class='cl-item' bindtap="tagtap" data-name="+">+</view>
  <view class='cl-item' bindtap="numtap" data-name="0">0</view>
  <view class='cl-item' bindtap="tagtap" data-name="-">-</view>
</view>

<view class="cl-row">
  <view class='cl-item' bindtap="tagtap" data-name="x">x</view>
  <view class='cl-item' bindtap="equeltap" data-name="=">=</view>
  <view class='cl-item' bindtap="tagtap" data-name="/">/</view>
</view>

<view class="cl-row">
  <view class='cl-item' bindtap="cleartap">clear</view>
</view>

wxss代码(类同于css)

返回顶部

.content{
  text-align: right;
  height: 80rpx;
  background-color:yellow; 
}

.cl-row{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

  .cl-item{
    display: flex;
    background-color: gray;
    /* 自适应像素 */
    height: 120rpx;
    width: 120rpx;
    margin: 5rpx;
    text-align: center;
    align-items: center;
    border-radius: 50%;
    justify-content: center;
  }

js代码

返回顶部

• 依次对数字按钮“numtap”、符号按钮“tagtap”、等号按钮“equaltap”、清除按钮“cleartap”的函数进行定义
• 浮点数的四则运算法则，优先级：“/ ”＞ “✖” ＞ “-” ＞ “+”，先处理所有“/”前后的运算，接着处理所有“x”、所有“-”和所有“+”

//获取应用实例
const app = getApp()

Page({
  data: {
    content: '',
  },

// 数字按钮
  numtap(event){
    this.data.content += event.currentTarget.dataset.name
    this.setData({
      content: this.data.content
    })
  },

// +、-、x、/按钮
  tagtap(event) {
    this.data.content += event.currentTarget.dataset.name
    this.setData({
      content: this.data.content
    })
  },

// =按钮
  equeltap(event) {
    var result
    var ods = []
    var display_str = this.data.content

    var operands = display_str.match(/[\d\.]+/g)
    var operators = display_str.match(/[/x+-]/g)
    // 转浮点数
    for(var i = 0; i < operands.length; i++){
      ods[i] = parseFloat(operands[i])
    }

    // 对所有“/”进行运算
    while(operators.indexOf('/') >= 0){
      var idx = operators.indexOf('/')
      operators.splice(idx)
      ods[idx] = ods[idx] / ods[idx + 1]
      ods.splice(idx + 1)
    }

    // 对所有“x”进行运算
    while (operators.indexOf('x') >= 0) {
      var idx = operators.indexOf('x')
      operators.splice(idx)
      ods[idx] = ods[idx] * ods[idx + 1]
      ods.splice(idx + 1)
    }

    // 对所有“-”进行运算
    while (operators.indexOf('-') >= 0) {
      var idx = operators.indexOf('-')
      operators.splice(idx)
      ods[idx] = ods[idx] - ods[idx + 1]
      ods.splice(idx + 1)
    }

    // 对所有“+”进行运算
    while (operators.indexOf('+') >= 0) {
      var idx = operators.indexOf('+')
      operators.splice(idx)
      ods[idx] = ods[idx] + ods[idx + 1]
      ods.splice(idx + 1)
    }

    result = String(ods[0])

    this.setData({
      content: result
    })

  },

// clear按钮
  cleartap(event) {
    this.setData({
      content: ''
    })
  },
})

欢迎关注，敬请点赞！
返回顶部