网络资源模板--微信小程序 实现的简易计算器App

目录

一、项目演示

二、项目测试环境

三、项目关键源码

四、项目源码 

---

一、项目演示

二、项目测试环境

三、项目关键源码

const math = require('./math.js')

// 计算器中的数字处理
module.exports = {
  target: 'num1',  // 表示当前正在输入哪个数字
  num1: '0',       // 保存第1个数字
  num2: '0',       // 保存第2个数字
  op: '',          // 运算符，值可以是 ＋ － × ÷
  // 设置当前数字
  setNum (num) {
    this[this.target] = num
  },
  // 获取当前数字
  getNum () {
    return this[this.target]
  },
  // 切换到第2个数字
  changeNum2 () {
    this.target = 'num2'
  },
  // 重置
  reset () {
    this.num1 = this.num2 = '0'
    this.target = 'num1'
    this.op = ''
  },
  // 进行计算
  getResult () {
    if (this.op === '＋') {
      return math.add(this.num1, this.num2) + ''
    } else if (this.op === '－') {
      return math.sub(this.num1, this.num2) + ''
    } else if (this.op === '×') {
      return math.mul(this.num1, this.num2) + ''
    } else if (this.op === '÷') {
      return math.div(this.num1, this.num2) + ''
    }
  }
}

这段代码实现了一个简单的计算器逻辑，具体功能包括：

• 维护两个数字 num1 和 num2，以及一个运算符 op，用于存储用户输入的操作数和运算符。
• setNum(num) 方法用于设置当前数字，根据 target 的值决定设置到 num1 还是 num2。
• getNum() 方法用于获取当前数字，根据 target 的值返回相应的数字。
• changeNum2() 方法用于切换到输入第二个数字的状态，将 target 设置为 num2。
• reset() 方法用于重置计算器，将 num1、num2、target 和 op 全部重置为初始状态。
• getResult() 方法用于进行计算，根据当前的运算符 op 使用外部引入的 math.js 中的加减乘除方法进行计算，并以字符串形式返回计算结果。

总体来说，这段代码实现了基本的计算器功能，包括输入数字、选择运算符、计算结果等操作。

<!--index.wxml-->
<view class="result">
  <!-- 结果区域 -->
  <view class="result-sub">{{ sub }}</view>
  <view class="result-num">{{ num }}</view>
</view>
<view class="btns">
  <!-- 按钮区域 -->
  <!-- 按钮区域第1行按钮的结构 -->
  <view>
    <view hover-class="bg" hover-stay-time="50" bindtap="resetBtn">C</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="delBtn">DEL</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="negBtn">+/-</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="opBtn" data-val="÷">÷</view>
  </view>
  <!-- 按钮区域第2行按钮的结构 -->
  <view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="7">7</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="8">8</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="9">9</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="opBtn" data-val="×">×</view>
  </view>
  <!-- 按钮区域第3行按钮的结构 -->
  <view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="4">4</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="5">5</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="6">6</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="opBtn" data-val="－">－</view>
  </view>
  <!-- 按钮区域第4行按钮的结构 -->
  <view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="1">1</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="2">2</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="3">3</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="opBtn" data-val="＋">＋</view>
  </view>
  <!-- 按钮区域第5行按钮的结构 -->
  <view>
    <view hover-class="bg" hover-stay-time="50" bindtap="numBtn" data-val="0">0</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="dotBtn">.</view>
    <view hover-class="bg" hover-stay-time="50" bindtap="execBtn">=</view>
  </view>
</view>

这段代码是一个小程序的前端页面代码，实现了一个简单的计算器功能。以下是对代码中各部分的详细总结：

• 页面结构：

  • 页面包含两个主要部分：result 和 btns。
  • result 区域用于显示计算器的结果，包括 sub 和 num 两个区域。
  • btns 区域包含各种操作按钮，用于用户输入数字和执行计算。

• 操作按钮：

  • 按钮分为多行，每行包含数字按钮和运算符按钮。
  • 每个按钮都设置了触摸效果和绑定相应的点击事件。
  • 数字按钮通过 data-val 属性设置对应的数字值，点击后会触发 numBtn 事件。
  • 运算符按钮通过 data-val 属性设置对应的运算符，点击后会触发 opBtn 事件。

• 按钮功能：

  • C 按钮用于重置计算器，点击后触发 resetBtn 事件。
  • DEL 按钮用于删除最后一个输入的字符，点击后触发 delBtn 事件。
  • +/- 按钮用于改变当前数字的正负号，点击后触发 negBtn 事件。
  • 运算符按钮用于选择加减乘除操作，点击后触发 opBtn 事件。

• 辅助功能：

  • dotBtn 按钮用于输入小数点。
  • execBtn 按钮用于执行计算，即求解表达式的结果。

总体来说，该页面通过按钮实现了一个简单的计算器功能，用户可以输入数字、选择运算符，执行计算并显示结果。界面清晰，操作简单，适合用于小型计算需求。

四、项目源码 

👇👇👇👇👇快捷方式👇👇👇👇👇