仿iOS风格简易微信小程序计算器

其他 2021-11-21 18:24:39 阅读次数: 0

仿iOS风格简易微信小程序计算器

整体描述

之前学习小程序的时候，自己写的一个计算器小程序，感觉学习一个新的编程语言，最基本的就是可以自己写出一个计算器的小程序，算是达到入门级的标准了，第一次写小程序，还有很多可以优化的地方，UI仿的iOS自带的计算器，程序截图如下：
计算器小程序截图

功能描述

  1. 实现加减乘除四则远算，包括整数，小数和正负运算；
  2. 实现计算过程显示，在这只显示最后一步运算式；
  3. 实现连续运算，上一步计算的结果可以直接在下一步运算使用；
  4. 00按键，相当于一次输入两个零；
  5. 实现取余运算，%键功能，这个在iOS的计算器中是百分比，在这改成取余运算。

工程代码

闲话少说，直接上代码，代码中注释也比较全，就不单独讲解了。

  1. wxml页面：
<!--pages/calc/index.wxml-->
<view class="calc-total-view">
  <view class="calc-view calc-process-view" scroll-y="true">
    <text class="calc-text calc-process-text" user-select="true">{
   
   {calcProcess}}</text>
  </view>
  <view class="calc-view calc-show-view" scroll-y="true">
    <text class="calc-text calc-show-text" user-select="true">{
   
   {finalVlaue}}</text>
  </view>
  <view class="input-view">
    <view class="row">
      <view class="calc-button function-input-button" hover-class="hover-class÷" hover-start-time="0" hover-stay-time="0" bindtap="onClearClick">AC</view>
      <view class="calc-button function-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onReverseClick">+/-</view>
      <view class="calc-button function-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onRemainderClick">%</view>
      <view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onDivideClick">/</view>
    </view>

    <view class="row">
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onOneClick">1</view>
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onTwoClick">2</view>
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onThreeClick">3</view>
      <view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onAddClick">+</view>
    </view>

    <view class="row">
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onFourClick">4</view>
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onFiveClick">5</view>
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onSixClick">6</view>
      <view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onMinusClick">-</view>
    </view>

    <view class="row">
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onSevenClick">7</view>
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onEightClick">8</view>
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onNineClick">9</view>
      <view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onMultiplyClick">*</view>
    </view>

    <view class="row">
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onDoubleZeroClick">00</view>
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onZeroClick">0</view>
      <view class="calc-button number-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onDotClick">.</view>
      <view class="calc-button calc-input-button" hover-class="hover-class" hover-start-time="0" hover-stay-time="0" bindtap="onCalcClick">=</view>
    </view>
  </view>
</view>
  1. wxss文件：
/* pages/calc/index.wxss */
.calc-view {
  width: 750rpx;
  height: 120rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  padding: 20rpx;
}

.calc-text {
  font-size: 30px;
  margin-left: 20rpx;
  margin-right: 20rpx;
  overflow-y: auto;
  overflow-x: scroll；
}

.calc-process-view {
  height: 80rpx;
}

.calc-process-text {
  font-size: 20px;
  color: grey;
}

.input-view {
  box-sizing: border-box;
}

.row {
  width: 750rpx;
  display: flex;
  box-sizing: border-box;
  padding-left: 10rpx;
  padding-right: 10rpx;
  padding-bottom: 10rpx;
  justify-content: space-between;
}

.calc-button {
  width: 180rpx;
  height: 100rpx;
  border-radius: 10px;
  border: 1px solid #000;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

.function-input-button {
  background: #e2e2e2;
}

.calc-input-button {
  background: #ffa631;
}

.calc-result-button {
  background: #ffa631;
}

.hover-class {
  background: #ecebeb;
}
  1. js页面：
// pages/calc/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    preVlaue: 0,
    nowNumber: 0,
    finalVlaue: 0,
    calcProcess: "",
    calcMethod: "",
    firstValue: 0.0,
    secondVlaue: 0.0,
    dotFlag: false,
    dotCourt: 1,
  },

  /**
   * 按AC时触发，清除全部内容
   */
  onClearClick() {
    this.data.preVlaue = 0
    this.data.nowNumber = 0
    this.data.finalVlaue = 0
    this.data.calcProcess = ""
    this.data.calcMethod = ""
    this.data.firstValue = 0.0
    this.data.secondVlaue = 0.0
    this.data.dotFlag = false
    this.data.dotCourt = 1
    this.setShowData(0)
    this.setProcessData("")
  },

  /**
   * 按运算符号时调用，清除之前输入数字的方法
   * 注：显示不清除
   */
  clearInputNum() {
    this.data.preVlaue = 0
    this.data.nowNumber = 0
    this.data.dotFlag = false
    this.data.dotCourt = 1.0
  },

  clearCalc() {
    this.data.preVlaue = 0
    this.data.nowNumber = 0
    this.data.calcMethod = ""
    this.data.secondVlaue = 0.0
    this.data.dotFlag = false
    this.data.dotCourt = 1
  },

  onReverseClick(event) {
    if (this.data.calcMethod == "") {
      this.data.firstValue = -this.data.firstValue
      this.data.preVlaue = 0
      this.data.nowNumber = 0
      this.data.dotFlag = false
      this.data.dotCourt = 1.0
      this.setShowData(this.data.firstValue)
      console.log(this.data.firstValue)
    }
  },

  onRemainderClick(event) {
    this.data.calcMethod = "%"
    this.clearInputNum()
  },

  onDivideClick(event) {
    this.data.calcMethod = "/"
    this.clearInputNum()
  },

  onOneClick(event) {
    this.processNumber(1)
  },

  onTwoClick(event) {
    this.processNumber(2)
  },

  onThreeClick(event) {
    this.processNumber(3)
  },

  onAddClick(event) {
    this.data.calcMethod = "+"
    this.clearInputNum()
  },

  onFourClick(event) {
    this.processNumber(4)
  },

  onFiveClick(event) {
    this.processNumber(5)
  },

  onSixClick(event) {
    this.processNumber(6)
  },

  onMinusClick(event) {
    this.data.calcMethod = "-"
    this.clearInputNum()
  },

  onSevenClick(event) {
    this.processNumber(7)
  },

  onEightClick(event) {
    this.processNumber(8)
  },

  onNineClick(event) {
    this.processNumber(9)
  },

  onMultiplyClick(event) {
    this.data.calcMethod = "*"
    this.clearInputNum()
  },

  onDoubleZeroClick(event) {
    if (!this.data.dotFlag) {
      if (this.data.calcMethod == "") {
        var num = this.data.preVlaue * 100
        this.data.preVlaue = num
        this.data.firstValue = num
      } else {
        var num = this.data.preVlaue * 100
        this.data.preVlaue = num
        this.data.secondVlaue = num
      }
      this.setShowData(num)
    } else {
      console.log("input error")
      wx.showToast({
        title: '输入错误',
        icon: 'none',
      })
    }
  },

  onZeroClick(event) {
    this.processNumber(0)
  },

  onDotClick(event) {
    if (!this.data.dotFlag) {
      this.data.dotFlag = true
    } else {
      console.log("dot error")
      wx.showToast({
        title: '输入错误',
        icon: 'none',
      })
    }
  },

  onCalcClick(event) {
    this.calcResult()
  },

  /**
   * 按数字键时触发，处理数字的方法
   */
  processNumber(number) {
    if (this.data.calcMethod == "") {
      if (this.data.dotFlag) {
        var num = number / Math.pow(10, this.data.dotCourt) + this.data.preVlaue
        this.data.dotCourt++
        this.data.preVlaue = num
        this.data.firstValue = num
      } else {
        var num = number + this.data.preVlaue * 10
        this.data.preVlaue = num
        this.data.firstValue = num
      }
    } else {
      if (this.data.dotFlag) {
        var num = number / Math.pow(10, this.data.dotCourt) + this.data.preVlaue
        this.data.dotCourt++
        this.data.preVlaue = num
        this.data.secondVlaue = num
      } else {
        var num = number + this.data.preVlaue * 10
        this.data.preVlaue = num
        this.data.secondVlaue = num
      }
    }
    this.setShowData(num)
  },

  /**
   * 按等号时触发，计算结果的方法
   */
  calcResult() {
    console.log(this.data.firstValue + this.data.calcMethod + this.data.secondVlaue)
    var calcProcess = this.data.firstValue + this.data.calcMethod + this.data.secondVlaue
    this.setProcessData(calcProcess)
    var result = 0.0
    switch (this.data.calcMethod) {
      case "+":
        result = this.data.firstValue + this.data.secondVlaue
        break;
      case "-":
        result = this.data.firstValue - this.data.secondVlaue
        break;
      case "*":
        result = this.data.firstValue * this.data.secondVlaue
        break;
      case "/":
        result = this.data.firstValue / this.data.secondVlaue
        break;
      case "%":
        result = this.data.firstValue % this.data.secondVlaue
        break;
      default: {
        result = this.data.firstValue
      }
    }
    this.data.firstValue = result
    this.setShowData(result)
    this.clearCalc()
  },

  /**
   * 设置显示结果数据
   */
  setShowData(number) {
    this.setData({
      finalVlaue: number
    })
  },

  /**
   * 设置计算过程数据
   */
  setProcessData(calcProcess) {
    this.setData({
      calcProcess
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }
})

问题优化

  1. 【问题】在计算乘除法的时候，由于使用的是float类型，会存在溢出的问题，导致乘除法小数的时候可能会出现无限循环的情况，后续版本优化一下，可以加一个判断处理；
  2. 【优化】可以增加所有运算过程的保存和查看，手动删除等操作；
  3. 【优化】点击数字键的回调都是单独写的，可以统一成一个方法。

猜你喜欢

转载自blog.csdn.net/nhx900317/article/details/114078700
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022