How to implement a simple Calculator in Mini Program

This article introduces the knowledge of "how to realize a simple calculator on Mini Program". Many people will encounter such a dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The effect is as follows:

# app.json

{"pages": ["pages/index/index", "pages/logs/logs"], "window": {"navigationBarBackgroundColor": "# 000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "Smart Calculator"}, "tabBar": {"color": "# ff69b4", "selectedColor": "# 0000ff", "backgroundColor": "# ffff00" "list": [{"pagePath": "pages/index/index", "text": "computer"}, {"pagePath": "pages/logs/logs", "text": "log"}, {"pagePath": "pages/logs/logs" "text": "go home"}]}}

# app.wsxx

/ * * app.wxss**/.container {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}

# index.wxml

{{display}} {{displayValue}}

# index.js

Page ({data: {value: null, / / the result after the last calculation. Null indicates that there is no result of the last calculation displayValue: "0", / / displays the value operator: null, / / the last calculation symbol Null indicates that there is no unfinished calculation waitingForOperand: false / / whether the previous key is a calculation symbol}, onLoad: function (options) {this.calculatorOperations = {"key-divide": (prevValue, nextValue) = > prevValue / nextValue, "key-multiply": (prevValue, nextValue) = > prevValue * nextValue, "key-add": (prevValue, nextValue) = > prevValue + nextValue, "key-subtract": (prevValue, nextValue) = > prevValue-nextValue "key-equals": (prevValue, nextValue) = > nextValue}}, / * AC operation Let's go back to * / clearAll () {this.setData ({value: null, displayValue: "0", operator: null, waitingForOperand: false})}, / * clear only the currently displayed input value * / clearDisplay () {this.setData ({displayValue: "0"})}, onTapFunction: function (event) {const key = event.target.dataset.key Switch (key) {case "key-clear": if (this.data.displayValue! = = "0") {this.clearDisplay ();} else {this.clearAll ();} break Case "key-sign": var newValue = parseFloat (this.data.displayValue) *-1 this.setData ({displayValue: String (newValue)}) break Case "key-percent": const fixedDigits = this.data.displayValue.replace (/ ^ -? dwind.var newValue) var newValue = parseFloat (this.data.displayValue) / 100this.setData ({displayValue: String (newValue.toFixed (fixedDigits.length + 2))}); break; default: break }, onTapOperator: function (event) {const nextOperator = event.target.dataset.key; const inputValue = parseFloat (this.data.displayValue); if (this.data.value = = null) {this.setData ({value: inputValue});} else if (this.data.operator) {const currentValue = this.data.value | | 0; const newValue = this.calculatorOperations [this.data.operator] (currentValue, inputValue) This.setData ({value: newValue, displayValue: String (newValue)});} this.setData ({waitingForOperand: true, operator: nextOperator});}, onTapDigit: function (event) {const key = event.target.dataset.key / / press the data-key tag key if (key = = "key-dot") {/ / press the dot if (! (/. /) .test (this.data.displayValue)) {this.setData ({displayValue: this.data.displayValue + "." WaitingForOperand: false})}} else {/ / Press the numeric key const digit = key [key.length-1] If (this.data.waitingForOperand) {this.setData ({displayValue: String (digit), waitingForOperand: false})} else {this.setData ({displayValue: this.data.displayValue = "0"? String (digit): this.data.displayValue + digit})}})

# index.wxss

Page {height:100%;}. Calculator {width: 100%; height: 100vh; border:solid 1px; background: rgb (238,5,5); position: relative; box-shadow: 0px 0px 20px 0px rgb (211,41,41); display: flex; flex-direction: column; box-sizing: border-box;}. Calculator-display {/ * display background color * / background: # 2c2a2c; flex: 1 } / * TODO: solve the problem of vertical centering of text, display digital color * / .calculator-display-text {padding: 030px; font-size: 3mm; color:rgb (245,245248); text-align: right;}. Calculator-keypad {display: flex;}. Calculator. Function-keys {display: flex; color:rgb (245,13,13);} .calculator. Digit-keys {background: # 0808f7; display: flex; flex-direction: row Flex-wrap: wrap-reverse;} .calculator-key-hover {/ * button after pressing * / box-shadow: inset 0px 0px 25vw 0px hsla (71,90%, 48%, 0.898);} .calculator-key {background-color:aqua; display: block; width: 25vW; height: 25vW; line-height: 25vW; border-top: 1px solid rgb (6,245,78); border-right: 1px solid rgb (19,241,12); text-align: center Box-sizing: border-box;}. Calculator. Function-keys. Calculator-key {font-size: 2em;}. Calculator. Digit-keys. Calculator-key {font-size: 3em;}. Calculator. Digit-keys. Key-0 {width: 50vW; text-align: left; padding-left: 9vW;}. Calculator. Digit-keys. Key-dot {padding-top: 1em; font-size: 0.75em;}. Calculator. Operator-keys. Calculator-key {color: rgb (248,165,10) Border-right: 0; font-size: 3eme;}. Calculator. Function-keys {background: linear-gradient (to bottom, rgb (6,6240) 0%, rgb (52,5,240) 100%);}. Calculator. Operator-keys {background: linear-gradient (to bottom, rgba (252jue 156jin1) 0%, rgba (247Jing 126 27jue 1) 100%);} .input-keys {width: 100%;}. Operator-keys {width: 100% } this is the end of the introduction to "how Mini Program implements a simple Calculator". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!