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
Table of contents 1. Introduction to import_table...
This question is a discussion among netizens in a...
The project requirements are: select date and tim...
The specific code for using jQuery to implement t...
Write a SQL first SELECT DISTINCT from_id FROM co...
To automatically load kernel modules in CentOS, y...
Table of contents 1. Reference plugins in the uni...
Table of contents 1. Introduction 2. Installation...
This question is very strange, so I will go strai...
Preparation 1. Environmental Description: Operati...
Alibaba Cloud Server installs and configures Tomc...
Communication between containers 1. Network shari...
Background: I want to install a SAP ECC server an...
Today, this article has collected 30 excellent cas...
1. Virtual Machine Preparation 1. Create a new vi...