Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how WeChat Mini Programs realizes the small function of calculator". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to achieve the small function of calculator by WeChat Mini Programs" can help you solve the problem.

Effect picture:

The code is attached:

App.json

{"pages": ["pages/index/index", "pages/logs/logs"], "window": {"navigationBarBackgroundColor": "# 000000", "navigationBarTextStyle": "white", "navigationBarTitleText": "Smart Calculator"}, "tabBar": {/ / add My tabBar is used to set the "color" of the bottom tab: "# 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.wxss/*

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

* * if you don't know some of the components, it is recommended to read it on WeChat Mini Programs's official website several times.

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,5240) 100%);}. Calculator. Operator-keys {background: linear-gradient (to bottom, rgba (252jue 156jin1) 0%, rgba (247dje 126cm1) 100%);} .input-keys {width: 100%;}. Operator-keys {width: 100%;

This is the end of the content about "how to achieve the small function of calculator by WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.