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
In this section, the author describes the special...
Preface Swap is a special file (or partition) loc...
This article is translated from the blog Usability...
Verification environment: [root@~~/]# rpm -qa | g...
Table of contents 1. Nginx implements load balanc...
Last time we talked about some SQL query optimiza...
Vue implements the palace grid rotation lottery (...
The VMware Workstation Pro version I use is: 1. F...
Find mirror We can search for images from the Doc...
Experimental environment: MYSQL 5.7.22 Enable bin...
This article example shares the specific code of ...
Introduction: This article takes the sample proje...
Application nesting of unordered lists Copy code T...
A story about database performance During the int...
This article introduces how to install the system...