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

Vue implements a simple shopping cart example

This article shares the specific code of Vue to i...

Detailed explanation of the usage of MySQL data type DECIMAL

MySQL DECIMAL data type is used to store exact nu...

Three common style selectors in html css

1: Tag selector The tag selector is used for all ...

Mysql Sql statement comments

You can add comments to MySQL SQL statements. Her...

Solution to MySql service disappearance for unknown reasons

Solution to MySql service disappearance for unkno...

In-depth analysis of the Identifier Case Sensitivity problem in MySQL

In MySQL, you may encounter the problem of case s...

Mysql updates certain fields of another table based on data from one table (sql statement)

The following code introduces MySQL to update som...

jQuery realizes the shuttle box effect

This article example shares the specific code of ...

Can MySQL's repeatable read level solve phantom reads?

introduction When I was learning more about datab...

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

Preface The file system is responsible for organi...

How to solve the mysql error 1033 Incorrect information in file: 'xxx.frm'

Problem Description 1. Database of the collection...

An example of dynamically implementing different styles of data in a column of el-table of element ui

Problem Description In the framework of Ele.me UI...

A brief discussion on the mysql execution process and sequence

Table of contents 1:mysql execution process 1.1: ...

JS interview question: Can forEach jump out of the loop?

When I was asked this question, I was ignorant an...

Summary of ways to implement single sign-on in Vue

The project has been suspended recently, and the ...