微信小程序实现小型计算器

更新时间：2022年09月09日 16:23:04 作者：richest_qi

这篇文章主要为大家详细
介绍了微信小程序实现小型计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了微信小程序实现小型计算器的具体代码，供大家参考，具体内容如下

app.js

// app.js
App({
  onLaunch() {
  },
  REGEXP:/^[\+\-×÷]$/
})

app.wxss

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

index.html

<!--index.wxml-->
<view class="result">
  <view class="result-express">{{express}}</view>
  <view class="result-value">{{result}}</view>
</view>
<view class="btns">
  <view class="item">
    <view class="reset" hover-class="bg" bindtap="reset">C</view>
    <view class="devide" hover-class="bg" bindtap="clickNumBtn" data-val="7">7</view>
    <view class="multiply" hover-class="bg" bindtap="clickNumBtn" data-val="4">4</view>
    <view class="delete" hover-class="bg" bindtap="clickNumBtn" data-val="1">1</view>
    <view class="percent" hover-class="bg" bindtap="clickNumBtn" data-val="%">%</view>
  </view>
  <view class="item">
    <view class="devide" hover-class="bg" bindtap="clickOptBtn" data-val="÷">÷</view>
    <view class="eight" hover-class="bg" bindtap="clickNumBtn" data-val="8">8</view>
    <view class="five" hover-class="bg" bindtap="clickNumBtn" data-val="5">5</view>
    <view class="two" hover-class="bg" bindtap="clickNumBtn" data-val="2">2</view>
    <view class="zero" hover-class="bg" bindtap="clickNumBtn" data-val="0">0</view>
  </view>
  <view class="item">
    <view class="multiply" hover-class="bg" bindtap="clickOptBtn" data-val="×">×</view>
    <view class="nine" hover-class="bg" bindtap="clickNumBtn" data-val="9">9</view>
    <view class="six" hover-class="bg" bindtap="clickNumBtn" data-val="6">6</view>
    <view class="three" hover-class="bg" bindtap="clickNumBtn" data-val="3">3</view>
    <view class="dot" hover-class="bg" bindtap="clickNumBtn" data-val=".">.</view>
  </view>
  <view class="item">
    <view class="delete" hover-class="bg" bindtap="delete">DEL</view>
    <view class="subtract" hover-class="bg" bindtap="clickOptBtn" data-val="-">-</view>
    <view class="add" hover-class="bg" bindtap="clickOptBtn" data-val="+">+</view>
    <view class="equal" hover-class="bg" bindtap="equal">=</view>
  </view>
</view>

index.wxss

/* index.wxss */
page{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.result,.btns{
  flex: 1;
}
.result{
  background: #f3f6fe;
}
.btns{
  display: flex;
  flex-direction: row;
}
.item{
  flex-basis: 25%;
  display: flex;
  flex-direction: column;
}
.item view{
  flex-basis: 20%;
  border-bottom: 1rpx solid #eee;
  border-right: 1rpx solid #eee;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  font-size: 17pt;
}
.item view:first-child{
  color: rgb(41, 192, 252);
}
.item:last-child view{
  color: rgb(41, 192, 252);
}
.item view.equal{
  flex-basis:40%;
  background-color: rgb(41, 192, 252);
  color:#fff;
}
.bg{
  background-color: #eee;
}
.result{
  position: relative;
}
.result-express{
  position: absolute;
  bottom:5vh;
  right: 3vw;
  font-size: 27pt;
}
.result-value{
  position: absolute;
  bottom: 1vh;
  right: 3vw;
  font-size: 16pt;
  color: darkgray;
}

index.js

// index.js
const app = getApp();
const {REGEXP} = app;
Page({
  data:{
    express:"",
    result:"",
    isEqualBtnClicked:false
  },
  reset:function(e){
    this.setData({
      express:"",
      result:"",
      isEqualBtnClicked:false
    })
  },
  preProcess:function(express){
    if(REGEXP.test(express[express.length-1])){
      express = express.slice(0,express.length-1);
    }
    return express;
  },
  delete:function(){
    const {express} = this.data;
    let newExpress = express.slice(0,express.length-1);
    let expressForCalc = this.preProcess(newExpress);
    let temp = this.calculate(expressForCalc);
    let newResult = temp==="0"?"":temp;
    this.setData({
      express:newExpress,
      result:newResult
    })
  },
  equal:function(){
    const {express} = this.data;
    let expressForCalc = this.preProcess(express);
    this.setData({
      result:"",
      express:this.calculate(expressForCalc),
      isEqualBtnClicked:true
    })
  },
  clickNumBtn:function(e){
    const val = e.target.dataset.val;
    let {express} = this.data;
    express+=val;
    this.setData({
      express:express,
      result:this.calculate(express)
    },function(){
      console.log(`click numBtn,current express: ${this.data.express},it'time to get result:${this.calculate(express)}`);
  
    })
  },
  clickOptBtn:function(e){
    let {express} = this.data;
    if(express==="" || REGEXP.test(express[express.length-1])) return;
    const opt = e.target.dataset.val;
    express+=opt;
    this.setData({
      express:express
    },function(){
      console.log("click optBtn,current express:",this.data.express);
    })
  },
  getLeftAndRight:function(express,i){
    const REGEXP = /\d+(\.\d+)?/;
    const REGEXP2 = /[\+\-×÷]/;

    let front = express.slice(0,i);
    let back = express.slice(i+1);
  
    let temp = front.split(REGEXP2);
    let left = Number(temp[temp.length-1]);
  
    let right = Number(back.match(REGEXP)[0]);
  
    return {left,right};
  },
  calculate:function(express){
    const REGEXP1 = /[×÷]/;
    const REGEXP2 = /\+(\d+)(\.\d+)?/;//正数
    const REGEXP3 = /\-(\d+)(\.\d+)?/;//负数
    const REGEXP4 = /\d+(\.\d+)?/;  

    const {getLeftAndRight} = this;
  
    let temp;
    let result = 0;
  
    //先乘除
    while((temp = express.match(REGEXP1)) !== null){
      let opt = temp[0];
      let i = temp["index"];
      let {left,right} = getLeftAndRight(express,i);
      switch(opt){
        case "×":express = express.replace(left+opt+right,left*right);break;
        case "÷":express = express.replace(left+opt+right,left/right);break;
      }
    }
  
    //后加减
    let firstNum = 0,sum1=0,sum2=0;
  
    let res = express.match(REGEXP4);
    if(res!==null && res["index"]===0){
      let str = res[0];
      firstNum = Number(str);
      express = express.slice(str.length);
    }
  
    while((temp = express.match(REGEXP2)) != null){
      let str = temp[0];
      express = express.replace(str,"");
      sum1 += Number(str.slice(1));
    }
    while((temp = express.match(REGEXP3)) != null){
      let str = temp[0];
      express = express.replace(str,"");
      sum2 += Number(str.slice(1));
    }
    
    result += firstNum + sum1 - sum2;
    
    return result.toString();
  }
})

测试验证

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

layui lay-verify form表单自定义验证规则详解
今天小编就为大家分享一篇layui lay-verify form表单自定义验证规则详解，具有很好的参考价值，相信我对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
Layui 导航默认展开和菜单栏选中高亮设置的方法
今天小编就为大家分享一篇Layui 导航默认展开和菜单栏选中高亮设置的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS中Map、WeakMap和Object的区别解析
Map、WeakMap和Object都是JavaScript中用于存储键值对的数据结构，它们在键类型、垃圾回收、可枚举性、方法和操作、以及继承等方面存在一些区别，适用于不同的场景，本文给大家详细讲解js map、weakmap和object区别，需要的朋友可以参考下
2023-04-04
尝试在让script的type属性等于text/html
我们可以在script片断中定义一个被JS调用的代码，但代码又不在页面上显示，这时，我们可以使用下面的方法;当script中的type等于text/html时我们可以做些什么呢？感兴趣的朋友可以了解下啊
2013-01-01
Bootstrap创建可折叠的组件
这篇文章主要为大家详细介绍了Bootstrap创建可折叠组件的对应方法，以实例为大家分享了Bootstrap折叠组件，感兴趣的小伙伴们可以参考一下
2016-02-02
实例详解JavaScript获取链接参数的方法
这篇文章主要介绍了实例详解JavaScript获取链接参数的方法的相关资料,需要的朋友可以参考下
2016-01-01
浏览器视频帧操作方法 requestVideoFrameCallback()
这篇文章主要介绍了浏览器视频帧操作方法 requestVideoFrameCallback()，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-07-07
Driver.js前端引导页组件的具体使用
Driver.js是一个引导插件，本文主要介绍了Driver.js前端引导页组件的具体使用，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
十大热门的JavaScript框架和库
这篇文章主要为大家详细介绍了十大热门的JavaScript框架和库，前端必备，感兴趣的小伙伴们可以参考一下
2017-03-03
基于JS2Image实现圣诞树代码
马上圣诞节了，作为一名程序猿，如何体现自己独特的过节风格，如何在朋友圈发一张专属自己的祝福照片我觉得很有必要，你们说是不是
2015-12-12

微信小程序实现小型计算器

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具