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

CentOS system rpm installation and configuration of Nginx

Table of contents CentOS rpm installation and con...

Detailed explanation of multiple implementation methods of Mysql counting by conditions

Recently, I was adding a series of statistical fu...

Solve the problem of inconsistency between mysql time and system time in docker

Recently, when I installed MySQL in Docker, I fou...

MySQL 5.7.19 (tar.gz) installation graphic tutorial under Linux

The first tutorial for installing MySQL-5.7.19 ve...

Complete steps to upgrade Nginx http to https

The difference between http and https is For some...

A brief discussion on the built-in traversal methods of JS arrays and their differences

Table of contents forEach() (ES6) method map() (E...

When the interviewer asked the difference between char and varchar in mysql

Table of contents Difference between char and var...

How to Fix File System Errors in Linux Using ‘fsck’

Preface The file system is responsible for organi...

Detailed explanation and examples of database account password encryption

Detailed explanation and examples of database acc...

Description of the hr tag in various browsers

Generally, we rarely meet HR, but once we do, it c...

CSS float property diagram float property details

Using the CSS float property correctly can become...

Detailed explanation of the implementation method and usage of CSS3 border-radius rounded corners

In the past, it was quite troublesome to achieve ...

Analysis and solution of the reasons for left and right jumps when loading web pages

I have been having this problem recently when desi...

Script to quickly list all host names (computer names) in the LAN under Linux

Recently, I have a need to list all host names in...

Overview of MySQL Statistics

MySQL executes SQL through the process of SQL par...