微信小程序计算器

微信小程序计算器

index.wxml

html 复制代码
<view class='screen'>{{result}}</view>
 
<view class='test-bg'>
  <view class='btnGroup'>
    <view class='item grey' bindtap='clickButton' id="{{C}}">AC</view>
    <view class='item grey' bindtap='clickButton' id="{{addSub}}">+/-</view>
    <view class='item grey' bindtap='clickButton' id="{{percent}}">%</view>
    <view class='item brown' bindtap='clickButton' id="{{div}}">÷</view>
  </view>
 
  <view class='btnGroup'>
    <view class='item black' bindtap='clickButton' id="{{id7}}">7</view>
    <view class='item black' bindtap='clickButton' id="{{id8}}">8</view>
    <view class='item black' bindtap='clickButton' id="{{id9}}">9</view>
    <view class='item brown' bindtap='clickButton' id="{{mut}}">×</view>
  </view>
 
  <view class='btnGroup'>
    <view class='item black' bindtap='clickButton' id="{{id4}}">4</view>
    <view class='item black' bindtap='clickButton' id="{{id5}}">5</view>
    <view class='item black' bindtap='clickButton' id="{{id6}}">6</view>
    <view class='item brown' bindtap='clickButton' id="{{sub}}">-</view>
  </view>
 
  <view class='btnGroup'>
    <view class='item black' bindtap='clickButton' id="{{id1}}">1</view>
    <view class='item black' bindtap='clickButton' id="{{id2}}">2</view>
    <view class='item black' bindtap='clickButton' id="{{id3}}">3</view>
    <view class='item brown' bindtap='clickButton' id="{{add}}">+</view>
  </view>
 
  <view class='btnGroup'>
    <view class='item0 black' bindtap='clickButton' id="{{id0}}">0</view>
    <view class='item black' bindtap='clickButton' id="{{dot}}">.</view>
    <view class='item brown' bindtap='clickButton' id="{{equ}}">=</view>
  </view>
 
</view>

index.wxss

css 复制代码
page {
    width: 100%;
    height: 100%;
    background-color: black;
  }
   
  .test-bg {
    position: fixed;
    bottom: 0;
  }
   
  .screen {
    position: fixed;
    color: #fbfbfb;
    font-size: 50px;
    bottom: 850rpx;
    text-align: right;
    width: 730rpx;
    word-wrap: break-word;
   
  }
   
  .btnGroup {
    display: flex;
    /*弹性显示结构*/
    flex-direction: row;
    /*横向显示*/
  }
   
  .item {
    width: 150rpx;
    height: 150rpx;
    line-height: 150rpx;
    border-radius: 100%;
    text-align: center;
    margin-right: 40rpx;
    margin-bottom: 8rpx;
    margin-left: 8rpx;
   
  }
   
  .brown {
    /* 前景色 */
    color: #000000;
    font-size: 50rpx;
    /* border: solid 1rpx #ffffff; */
    /* 背景色 */
    background-color: #a5a5a5;
  }
   
  .black {
    /* 前景色 */
    color: #fefefe;
    font-size: 65rpx;
    /* border: solid 1rpx #ffffff; */
    /* 背景色 */
    background: #333333;
  }
   
  .grey {
    /* 前景色 */
    color: #fbfbfb;
    font-size: 50rpx;
    /* 背景色 */
    background: #a5a5a5;
  }
   
  .item0 {
    width: 350rpx;
    line-height: 180rpx;
    border-radius: 175rpx;
    text-align: center;
    margin-right: 40rpx;
  }

index.js文件

javascript 复制代码
Page({
    data: {
      C: 'C',
      addSub: 'addSub',
      add: '+',
      sub: '-',
      mut: '×',
      div: '÷',
      equ: '=',
      percent: '%',
      dot: '.',
      id0: '0',
      id1: '1',
      id2: '2',
      id3: '3',
      id4: '4',
      id5: '5',
      id6: '6',
      id7: '7',
      id8: '8',
      id9: '9',
      result: '0',
      valiBackOfArray: ['+', '-', '×', '÷', '.'],
      completeCalculate: false
    },
   // 计算结果
    calculate: function (str) {
      // 判断负数
      var isNagativeNum = false;
      if (str.charAt(0) == '-') {
        str = str.replace('-', '').replace('(', '').replace(')', '');
        isNagativeNum = true;
      }
      // 字符串解析
      var addArray = str.split('+');
      var sum = 0.0;
      for (var i = 0; i < addArray.length; i++) {
        if (addArray[i].indexOf('-') == -1) {
          if (addArray[i].indexOf('×') != -1 || addArray[i].indexOf('÷') != -1 || addArray[i].indexOf('%') != -1)
            sum += this.calculateMutDiv(addArray[i]);
          else sum += Number(addArray[i]);
        } else {
          var subArray = addArray[i].split('-');
          var subSum = 0;
          if (subArray[0].indexOf('×') != -1 || subArray[0].indexOf('÷') != -1 || subArray[0].indexOf('%') != -1) subSum = this.calculateMutDiv(subArray[0]);
          else subSum = Number(subArray[0]);
          for (var j = 1; j < subArray.length; j++) {
            if (subArray[i].indexOf('×') != -1 || subArray[i].indexOf('÷') != -1)
              subSum -= this.calculateMutDiv(subArray[j]);
            else subSum -= Number(subArray[j]);
          }
          sum += subSum;
        }
      }
      if (isNagativeNum) return (-sum).toString();
      else return sum.toString();
    },
    // 分块乘除运算
    calculateMutDiv: function (str) {
      var addArray = str.split('×');
      var sum = 1.0;
      for (var i = 0; i < addArray.length; i++) {
        if (addArray[i].indexOf('÷') == -1 && addArray[i].indexOf('%') == -1) {
          sum *= Number(addArray[i]);
        } else if (addArray[i].indexOf('%') == -1) {
          var subArray = addArray[i].split('÷');
          var subSum = Number(subArray[0]);
          for (var j = 1; j < subArray.length; j++) {
            subSum /= Number(subArray[j]);
          }
          sum *= subSum;
        } else {
          var subArray = addArray[i].split('%');
          var subSum = Number(subArray[0]);
          for (var j = 1; j < subArray.length; j++) {
            subSum %= Number(subArray[j]);
          }
          sum *= subSum;
        }
      }
      return sum;
    },
    // 运算符结尾
    isOperatorEnd: function (str) {
      for (var i = 0; i < this.data.valiBackOfArray.length; i++) {
        if (str.charAt(str.length - 1) == this.data.valiBackOfArray[i]) return true;
      }
      return false;
    },
    clickButton: function (event) {
      if (this.data.result == 0) {
        if (event.target.id == 'back' || event.target.id == 'C' || event.target.id == 'addSub' || event.target.id == '%' || event.target.id == '+' || event.target.id == '-' || event.target.id == '×' || event.target.id == '÷' || event.target.id == '=') return;
        this.setData({
          result: event.target.id
        });
      } else if (event.target.id == 'back') {
        this.setData({
          result: this.data.result.length == 1 ? '0' : this.data.result.substring(0, this.data.result.length - 1)
        });
      } else if (event.target.id == 'C') {
        this.setData({
          result: '0'
        });
      } else if (event.target.id == 'addSub') {
        var r = this.data.result;
        if (this.isOperatorEnd(r)) return;
        if (r.charAt(0) == '-') this.setData({
          result: r.replace('-', '').replace('(', '').replace(')', '')
        });
        else this.setData({
          result: '-(' + r + ')'
        });
      } else if (event.target.id == '%') {
        this.setData({
          result: this.data.result + event.target.id
        });
      } else if (event.target.id == '=') {
        if (this.isOperatorEnd(this.data.result)) return;
        this.setData({
          result: this.calculate(this.data.result)
        });
        this.setData({
          completeCalculate: true
        });
      } else {
        if (this.isOperatorEnd(this.data.result) && this.isOperatorEnd(event.target.id)) return;
        // 结果有小数点,到输入运算符前不能再输入小数点
        if (this.data.completeCalculate && this.data.result.indexOf('.') != -1 && event.target.id == '.') return;
        for (var i = 0; i < this.data.valiBackOfArray.length - 1; i++) {
          if (this.data.valiBackOfArray[i] == event.target.id) {
            this.setData({
              completeCalculate: false
            });
            break;
          }
        }
        this.setData({
          result: this.data.result + event.target.id
        });
      }
    }
  })

以上就是微信小程序计算器的源代码,如有导入问题,一定是没联网

相关推荐
excel4 分钟前
前端必备:从能力检测到 UA-CH,浏览器客户端检测的完整指南
前端
前端小巷子11 分钟前
Vue 3全面提速剖析
前端·vue.js·面试
悟空聊架构18 分钟前
我的网站被攻击了,被干掉了 120G 流量,还在持续攻击中...
java·前端·架构
CodeSheep19 分钟前
国内 IT 公司时薪排行榜。
前端·后端·程序员
尖椒土豆sss23 分钟前
踩坑vue项目中使用 iframe 嵌套子系统无法登录,不报错问题!
前端·vue.js
遗悲风24 分钟前
html二次作业
前端·html
江城开朗的豌豆27 分钟前
React输入框优化:如何精准获取用户输入完成后的最终值?
前端·javascript·全栈
CF14年老兵27 分钟前
从卡顿到飞驰:我是如何用WebAssembly引爆React性能的
前端·react.js·trae
画月的亮31 分钟前
前端处理导出PDF。Vue导出pdf
前端·vue.js·pdf
江城开朗的豌豆37 分钟前
拆解Redux:从零手写一个状态管理器,彻底搞懂它的魔法!
前端·javascript·react.js