WeChat applet calculator example

WeChat applet calculator example

This article shares the specific code of the WeChat applet to implement the calculator for your reference. The specific content is as follows

Project Display

Page Design

It is divided into the upper input display part and the lower key part

<!--pages/index/index.wxml-->
<view class="result">
  <view class="result-num">{{num}}</view>
  <view class="result-op">{{op}}</view>
</view>
<view class="btns">
  <view>
    <view hover-class="bg" bindtap="resetBtn">C</view>
    <view hover-class="bg" bindtap="delBtn">DEL</view>
    <view hover-class="bg" bindtap="opBtn" data-val="%">%</view>
    <view hover-class="bg" bindtap="opBtn" data-val="/">÷</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="7">7</view>
    <view hover-class="bg" bindtap="numBtn" data-val="8">8</view>
    <view hover-class="bg" bindtap="numBtn" data-val="9">9</view>
    <view hover-class="bg" bindtap="opBtn" data-val="*">×</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="4">4</view>
    <view hover-class="bg" bindtap="numBtn" data-val="5">5</view>
    <view hover-class="bg" bindtap="numBtn" data-val="6">6</view>
    <view hover-class="bg" bindtap="opBtn" data-val="-">-</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="1">1</view>
    <view hover-class="bg" bindtap="numBtn" data-val="2">2</view>
    <view hover-class="bg" bindtap="numBtn" data-val="3">3</view>
    <view hover-class="bg" bindtap="opBtn" data-val="+">+</view>
  </view>
  <view>
    <view hover-class="bg" bindtap="numBtn" data-val="0">0</view>
    <view hover-class="bg" bindtap="dotBtn">.</view>
    <view hover-class="bg" bindtap="opBtn" data-val="=">=</view>
  </view>
</view>

Page Style

/* pages/index/index.wxss */

page {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: #555;
}

.result {
  flex: 1;
  background: #f3f6fe;
  position: relative;
}

.result-num {
  position: absolute;
  font-size: 27pt;
  bottom: 5vh;
  right: 3vw;
}

.result-op {
  font-size: 15pt;
  position: absolute;
  bottom: 1vh;
  right: 3vw;
}

.btns {
  flex: 1;
}

/* Button style */

.bg {
  background: rgb(223, 44, 20);
}

.btns {
  flex: 1;
  display: flex;
  flex-direction: column;
  font-size: 17pt;
  border-top: 1rpx solid #ccc;
  border-left: 1rpx solid #ccc;
}

.btns > view {
  flex: 1;
  display: flex;
}

.btns > view > view {
  flex-basis: 25%;
  border-right: 1rpx solid #ccc;
  border-bottom: 1rpx solid #ccc;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btns > view:last-child > view:first-child {
  flex-basis: 50%;
}

.btns > view:first-child > view:first-child {
  color: #f00;
}

.btns > view > view:last-child {
  color: #fc8e00;
}

Page Logic

util–>calc.js

The calculation process is to multiply the decimals by the highest power of 10 of the two numbers to convert them into integers, so that high-precision calculations can be performed, and finally divide the result by the corresponding power of 10.

For example 

// Accurate calculation module.exports = {
  // add: function(arg1, arg2) {
    var r1, r2, m
    try {
      r1 = arg1.toString().split(".")[1].length
    } catch (e) {
      r1 = 0
    }
    try {
      r2 = arg2.toString().split(".")[1].length
    } catch (e) {
      r2 = 0
    }
    // Convert all decimals to integers before calculating m is the power of 10 that needs to be multiplied by m = Math.pow(10, Math.max(r1, r2))
    // Finally, divide by m when returning
    return (arg1 * m + arg2 * m) / m
  },
  // Subtract sub: function(arg1, arg2) {
    var r1, r2, m, n
    try {
      r1 = arg1.toString().split(".")[1].length
    } catch (e) {
      r1 = 0
    }
    try {
      r2 = arg2.toString().split(".")[1].length
    } catch (e) {
      r2 = 0
    }
    m = Math.pow(10, Math.max(r1, r2))
    //Dynamic control precision length n = (r1 >= r2) ? r1 : r2
    return ((arg1 * m - arg2 * m) / m).toFixed(n)
  },
  // Multiply by mul: function(arg1, arg2) {
    var m = 0,
      s1 = arg1.toString(),
      s2 = arg2.toString()
    try {
      m += s1.split(".")[1].length
    } catch (e) {}
    try {
      m += s2.split(".")[1].length
    } catch (e) {}
    return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
  },
  // except div: function(arg1, arg2) {
    var t1 = 0,
      t2 = 0,
      r1, r2
    try {
      t1 = arg1.toString().split(".")[1].length
    } catch (e) {}
    try {
      t2 = arg2.toString().split(".")[1].length
    } catch (e) {}

    r1 = Number(arg1.toString().replace(".", ""))
    r2 = Number(arg2.toString().replace(".", ""))
    return (r1 / r2) * Math.pow(10, t2 - t1)
  }
}

index.js

Digital click event handler

When the clicked number is not zero and the indication is not cleared, the input num is concatenated to the num in the page.

 //Number button event processing function numBtn: function(e) {
    var num = e.target.dataset.val
    if (this.data.num === '0' || this.isClear) {
      this.setData({
        num: num
      })
      this.isClear = false
    } else {
      this.setData({
        num: this.data.num + num
      })
    }
  },

Operators handle events

 // Operator event processing function opBtn: function(e) {
    var op = this.data.op
    // Get the previous number var num = Number(this.data.num)
    this.setData({
      op: e.target.dataset.val
    })
    if (this.isClear) {
      return
    }
    this.isClear = true
    if (this.result === null) {
      this.result = num
      return
    }
    if (op === '+') {
      this.result = calc.add(this.result, num)
    } else if (op === '-') {
      ......
      Other operations (see the complete code section below for detailed code)
      ......
    }
    this.setData({
      num: this.result + ''
    })
  },

All js

// pages/index/index.js
const calc = require('../../utils/calc.js')

Page({

  /**
   * Initial data of the page */
  data: {
    num: '0',
    op: ''
  },
  // Result result: null,
  // Whether to clear the number line/*
  Cleared (value is true)
    After clicking the operator, change it to true so that the next time you enter a number, the display will be cleared by clicking */
  isClear: false,

  //Number button event processing function numBtn: function(e) {
    var num = e.target.dataset.val
    if (this.data.num === '0' || this.isClear) {
      this.setData({
        num: num
      })
      this.isClear = false
    } else {
      this.setData({
        num: this.data.num + num
      })
    }
  },

  // Operator event processing function opBtn: function(e) {
    var op = this.data.op
    // Get the previous number var num = Number(this.data.num)
    this.setData({
      op: e.target.dataset.val
    })
    if (this.isClear) {
      return
    }
    this.isClear = true
    if (this.result === null) {
      this.result = num
      return
    }
    if (op === '+') {
      this.result = calc.add(this.result, num)
    } else if (op === '-') {
      this.result = calc.sub(this.result, num)
    } else if (op === '*') {
      this.result = calc.mul(this.result, num)
    } else if (op === '/') {
      this.result = calc.div(this.result, num)
    } else if (op === '%') {
      this.result = this.result % num
    }
    this.setData({
      num: this.result + ''
    })
  },

  // Decimal point event processing function dotBtn: function() {
    if (this.isClear) {
      this.setData({
        num: '0.'
      })
      this.isClear = false
      return
    }
    if (this.data.num.indexOf('.') >= 0) {
      return
    }
    this.setData({
      num: this.data.num + '.'
    })
  },

  // DEL button processing function delBtn: function() {
    var num = this.data.num.substr(0, this.data.num.length - 1)
    this.setData({
      num: num === '' ? '0' : num
    })
  },

  // C button event processing function resetBtn: function() {
    this.result = null
    this.isClear = false
    this.setData({
      num: '0',
      op: ''
    })
  }
})

Case download: WeChat applet calculator case

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • WeChat applet implements a simple calculator
  • Implementing calculator functions with WeChat applet
  • WeChat applet implements simple calculator function
  • WeChat applet implements calculator function
  • WeChat applet calculator example
  • WeChat applet implements calculator function
  • WeChat applet implements simple calculator function
  • WeChat applet implements a simple calculator
  • WeChat applet simple calculator implementation code example

<<:  Mysql timeline data to obtain the first three data of the same day

>>:  Tutorial on installing phpMyAdmin under Linux centos7

Recommend

MySQL turns off password strength verification

About password strength verification: [root@mysql...

Detailed explanation of the use of Echart charts in the front-end and back-end of the project

Table of contents Preface 1. Project Architecture...

The perfect solution for MYSQL5.7.24 installation without data directory and my-default.ini and service failure to start

MySQL official website download address: https://...

Use CSS to easily implement some frequently appearing weird buttons

background In the group, some students will ask r...

MySQL automatically inserts millions of simulated data operation code

I use Navicat as my database tool. Others are sim...

Detailed steps to install a virtual machine and use CentOS 8 using VMware 15

Preface: I'm currently learning Linux and .Ne...

Detailed explanation of process management in Linux system

Table of contents 1. The concept of process and t...

Detailed tutorial on installation and configuration of compressed version of MySQL database

Table of contents 1. Download MySQL 2. Unzip the ...

Nginx anti-crawler strategy to prevent UA from crawling websites

Added anti-crawler policy file: vim /usr/www/serv...

4 principles for clean and beautiful web design

This article will discuss these 4 principles as t...

Detailed process of creating a VR panoramic project using React and Threejs

Recently, I'm learning to use React with Thre...

How to maintain MySQL indexes and data tables

Table of contents Find and fix table conflicts Up...

Native js to achieve accordion effect

In actual web page development, accordions also a...

Alibaba Cloud Server Tomcat cannot be accessed

Table of contents 1. Introduction 2. Solution 2.1...

Summary of Css methods for clearing floats

Float is often used in web page layout, but the f...