This article shares the specific code of the WeChat applet to implement the calculator for your reference. The specific content is as follows Project DisplayPage DesignIt 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 Logicutil–>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:
|
<<: Mysql timeline data to obtain the first three data of the same day
>>: Tutorial on installing phpMyAdmin under Linux centos7
About password strength verification: [root@mysql...
Table of contents Preface 1. Project Architecture...
MySQL official website download address: https://...
background In the group, some students will ask r...
I use Navicat as my database tool. Others are sim...
Preface: I'm currently learning Linux and .Ne...
Table of contents 1. The concept of process and t...
Table of contents 1. Download MySQL 2. Unzip the ...
Added anti-crawler policy file: vim /usr/www/serv...
This article will discuss these 4 principles as t...
Recently, I'm learning to use React with Thre...
Table of contents Find and fix table conflicts Up...
In actual web page development, accordions also a...
Table of contents 1. Introduction 2. Solution 2.1...
Float is often used in web page layout, but the f...