This article shares the specific code for the WeChat applet to implement the calculator function for your reference. The specific content is as follows wxml <view class='content'> <input value='{{calculation}}'></input> <view class='box'> <button class='yellow-color'>Backspace</button> <button class='yellow-color' bindtap='empty'>Clear screen</button> <button class='yellow-color'>❤</button> <button bindtap='add' data-text='+' class='yellow-color'>+</button> </view> <view class='box'> <button bindtap='add' data-text='9'>9</button> <button bindtap='add' data-text='8'>8</button> <button bindtap='add' data-text='7'>7</button> <button bindtap='add' class='yellow-color' data-text='-'>-</button> </view> <view class='box'> <button bindtap='add' data-text='6'>6</button> <button bindtap='add' data-text='5'>5</button> <button bindtap='add' data-text='4'>4</button> <button bindtap='add' class='yellow-color' data-text='*'>*</button> </view> <view class='box'> <button bindtap='add' data-text='3'>3</button> <button bindtap='add' data-text='2'>2</button> <button bindtap='add' data-text='1'>1</button> <button bindtap='add' data-text='/' class='yellow-color'>÷</button> </view> <view class='box'> <button bindtap='add' data-text='0'>0</button> <button bindtap='add' data-text='.'>.</button> <button>History</button> <button class='yellow-color' bindtap='res'>=</button> </view> </view> wxss input { width: 95%; height: 250rpx; margin: 0 auto; margin-bottom: 20rpx; border-bottom: 1rpx solid #ccc; } .box { display: flex; } button { width: 20%; height: 150rpx; margin-bottom: 20rpx; line-height: 150rpx; background-color:rgb(0, 150, 250); color: white; } .yellow-color { background-color: rgb(247, 142, 24) } JS //index.js //Get the application instance const app = getApp() Page({ data: { calculation:"", result:0, character:[], // operator symbol operand: [], // number temp:false }, // Input box to enter data add:function(e) { let input = e.currentTarget.dataset.text; var that = this; if (input == '+' || input == '-' || input == '*' || input == '/') { this.data.temp = false; // Used to record whether the last time was an operator var item = 'character[' + this.data.character.length+ ']'; this.setData({ [item] :input }) } else { var item = 'operand['+this.data.operand.length+']'; if (that.data.temp) { // Get the previous value var res = 'operand[' + (this.data.operand.length-1) + ']' var ress = that.data.operand.length-1; var xyz = that.data.operand[ress] * 10 + parseInt(input); that.setData({ [res]:xyz }) } else { input = parseInt(input); that.data.temp = true; that.setData({ [item]: input }) } } // Put all the content into the display box this.setData({ calculation:this.data.calculation+input }) }, // Calculate the answer res:function() { console.log(this.data.character.length); console.log(this.data.operand.length) var character_len = this.data.character.length; var operand_len = this.data.operand.length; console.log(operand_len - character_len) if (operand_len - character_len == 1) { this.data.result = this.data.operand[0]; console.log("initial value"+this.data.result); for(var i=0;i<character_len;i++) { if(this.data.character[i] == '+') { this.data.result = this.data.result + this.data.operand[i + 1]; } if (this.data.character[i] == '-') { this.data.result = this.data.result - this.data.operand[i + 1]; } if (this.data.character[i] == '*') { this.data.result = this.data.result * this.data.operand[i + 1]; } if (this.data.character[i] == '/') { this.data.result = this.data.result / this.data.operand[i + 1]; } } } else { this.setData({ Result: 'Input is incorrect, clear the data and re-enter' }) } this.setData({ calculation:this.data.result }) }, // Clear the screen empty:function() { this.setData({ calculation: "", result: 0, character: [], // operator symbol operand: [], // number temp: false } } }) 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 index coverage example analysis
>>: Graphic tutorial on installing Mac system in virtual machine under win10
Among classic color combinations, probably no one...
When I was working on a project recently, I found...
1. Download and unzip to: /Users/xiechunping/Soft...
Table of contents 1. Introduce cases 2. View the ...
When installing Tomcat in Docker, Tomcat may over...
Disabling and enabling MySQL foreign key constrai...
Table of contents Mixin Mixin Note (duplicate nam...
Overview Nginx can use variables to simplify conf...
Why did I use this? It all started with the makin...
1. Overall steps At the beginning, we introduced ...
Recently, when working on mobile pages, inline-bl...
Turn off ping scanning, although it doesn't h...
MySQL master-slave configuration and principle, f...
Docker Compose can realize the orchestration of D...
Table of contents Preface Basic Introduction Code...