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

This article introduces the relevant knowledge of "how to realize the calculator function of Mini Program". In the operation of practical cases, many people will encounter such a dilemma, 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!

Realize the calculator on the analog mobile phone, which can be operated by input.

This page is to calculate the collection of the page, if you do not need the following content can be deleted

Wxml

{{express}} = {{result}} AC% / 7 8 9 × 4 56-1 23 + 0. = manual collection collection code collection

Js

Data: {express: ", / / expression of the first line result:" 0 ", / / result of the second line calc2: {str:", / / temporary string strList: [], / / infix expression storage (queue first-in-first-out) strListP: [], / / suffix expression (queue first-in-first-out) list: [] / / Stack of operators (first in, last out) count: [], / / evaluates the expression stack (first in, then out) flag: 0 / / indicates whether the last bit of the string is the Operand symbol bit}, isqr: false,}, / / binds this event to all text or view Increase the corresponding custom attribute value clickKeyBoard (e) {let that = this at the same time Let input = e.currentTarget.dataset.con / / get each input if (input = = "c") {that.handleClear ();} else if (input = = "←") {that.handleDelete ();} else {/ / call processing string that.handleInfo (input) }}, / / handle local user input operation handleInfo (input) {if (this.data.calc2.str.length = = 0) {/ / first click if (input = = "-" | | this.checkShuZi (input)) {/ / minus sign this.addStr (input);} else {return }} else {if (this.data.calc2.flag = = 1) {/ / indicates that the last bit is the symbol if (this.checkFuHao (input)) {this.data.calc2.str = this.data.calc2.str.substring (0, this.data.calc2.str.length-1); / / remove the last symbol and add the latest symbol to this.addStr (input) } else {this.addStr (input);} console.log ();} else {this.addStr (input); this.result ();}} this.result (), / / the customer clicks the equal sign and result () {/ / each click equals the list again to empty this.data.calc2.strList.length = 0 This.data.calc2.strListP.length = 0; this.data.calc2.list.length = 0; this.data.calc2.count.length = 0; / / turn the expression into the infix expression queue this.expressToStrList (this.data.express); console.log (this.data.calc2.strList); / / assign the infix expression collection to the temporary variable let tempList = this.data.calc2.strList; this.expressToStrListP (tempList) Console.log (this.data.calc2.strListP); / / final calculation let tempP = this.data.calc2.strListP for (let m in tempP) {if (this.checkFuHao2 (tempp [m])) {/ / No dot symbolic method to determine let M1 = this.data.calc2.count [0]; / / fetch the first data this.data.calc2.count.shift () / / delete the data let m2 = this.data.calc2.count [0]; this.data.calc2.count.shift (); / / console.log ("M1 is" + M1); / / console.log ("m2 is" + m2); / / console.log ("operator is" + tempP [m]) / / console.log ("calculation result is:" + this.countDetail (m2, tempP [m], M1); this.data.calc2.count.unshift (this.countDetail (m2, tempP [m], M1) / / put the calculation result in count} else {this.data.calc2.count.unshift (tempp [m]) / / press the number into}} console.log ("the final calculation result is" + parseFloat (this.data.calc2.count [0]). ToFixed (2)); this.setData ({result: tempp [0]}) }, / / actual calculation countDetail (E1, e2, e3) {let result = 0; console.log (E1); console.log (e2); console.log (e3); try {if (e2 = = "×") {if (typeof (E1)! = "undefined") {result = parseFloat (E1) * parseFloat (e3);} else {result = parseFloat (e3) }} else if (e2 = = "/") {if (typeof (E1)! = "undefined") {result = parseFloat (E1) / parseFloat (e3);} else {result = parseFloat (e3) }} else if (e2 = = "%") {if (typeof (E1)! = "undefined") {result = parseFloat (E1) / parseFloat (e3);} else {result = parseFloat (e3);}} else if (e2 = = "+") {if (typeof (E1)! = "undefined") {result = parseFloat (E1) + parseFloat (e3) } else {result = parseFloat (e3);}} else {if (typeof (E1)! = "undefined") {result = parseFloat (E1)-parseFloat (e3);} else {result = parseFloat (e3);}} catch (error) {} return result }, / / transform a set of infix expressions into a collection of suffix expressions expressToStrListP (tempList) {for (let item in tempList) {if (tempList [item]) {/ / No dot symbolic method to determine if (this.data.calc2.list.length = = 0) {this.data.calc2.list.unshift (tempList [item])) / / directly add the add operator} else {if (this.checkFuHaoDX (this.data.calc2.list [0], tempList [item]) {for (let x in this.data.calc2.list) {this.data.calc2.strListP.push (this.data.calc2.list [x])) / / put all operators in listP} this.data.calc2.list.length = 0; / / leave list empty after the loop; / / add new elements to} else {this.data.calc2.list.unshift (tempList [item]) / / directly add the add operator} else {this.data.calc2.strListP.push (tempList [item]) / / the number is directly added to the suffix set}} / / after the loop, the last one may be a number, and the character is not taken, then the rest of the operator is added to the listP if (this.data.calc2.list.length > 0) {for (let x in this.data.calc2.list) {this.data.calc2.strListP.push (this.data.calc2.list [x]) / / put all operators in listP} this.data.calc2.list.length = 0 / / leave list empty} at the end of the loop}, / / determine the priority of the two operators (M1 is the last element added in the list set to compare the element to be entered. If M1 is larger than m2, pop up the list set to listp, and then add m2 to list. Otherwise, directly add m2 to list) checkFuHaoDX (M1, m2) {if ((M1 = "%" | | M1 = = "×" | | M1 = = "/") & & (m2 = = "-" | m2 = = "+")) {return true } else {return false;}}, / / change the string expression to infix queue expressToStrList (express) {let temp = "; / define temporary variable / / change the expression to infix queue for (let I = 0; I)

< express.length; i++) { if (i == 0 && express[i] == "-") { temp = temp + express[i]; } else { if (this.checkShuZi2(express[i])) { //如果i是数字 temp = temp + express[i]; } else { if (temp.length >

0) {if (express [I] = ".") {temp = temp + express [I];} else {this.data.calc2.strList.push (parseFloat (temp)); temp = ""; this.data.calc2.strList.push (express [I]) }} else {temp = temp + express [I];} / / cycle to see if there are any numbers in temp, if if (temp.length > 0 & & this.checkShuZi (temp.substring (temp.length-1) {this.data.calc2.strList.push (parseFloat (temp)); temp = "" }}, / / process customer input clear key handleClear () {this.data.calc2.str = ""; this.data.calc2.strList.length = 0; this.data.calc2.strListP.length = 0; this.data.calc2.list.length = 0; this.data.calc2.count.length = 0; this.data.calc2.minusFlag = 0 This.setData ({express: ", result:"});}, / process customer input fallback key handleDelete () {let that = this; let str = that.data.calc2.str; if (str.length > 0) {str = str.substring (0, str.length-1); that.data.calc2.str = str That.setData ({express: str,});} else {return;}}, / / determines whether it is an operator (with a period, used when organizing expressions. Cannot be entered repeatedly) checkFuHao (input) {if (input = = "-" | | input = = "+" | | input = = "/" | | input = = "%" | | input = = "×" | | input = = ".") {return true;} else {return false }}, / / determine whether it is the operator (excluding periods) checkFuHao2 (input) {if (input = = "-" | | input = = "+" | | input = = "/" | | input = = "%" | | input = = "×") {return true;} else {return false }, / / determine whether it is a numeric checkShuZi (input) {if (input = = "0" | | input = = "1" | | input = = "2" | | input = = "3" | | input = "4" | | input = = "5" | | input = = "6" | | input = = "7" | input = = "8" | | input = "9") {return true;} else {return false;}}, / / determine whether it is a number (inclusive. CheckShuZi2 (input) {if (input = = "0" | | input = = "1" | | input = = "2" | | input = = "3" | | input = = "4" | | input = = "5" | | input = = "6" | | input = = "7" | | input = "8" | | input = "9" | | input = ".") {return true;} else {return false }}, / / add a new character to the string (append directly to determine whether to change the variable flag) addStr (input) {this.data.calc2.str = this.data.calc2.str + input; if (this.checkFuHao (input)) {this.data.calc2.flag = 1; / / set the flag bit 1} else {this.data.calc2.flag = 0 } this.setData ({express: this.data.calc2.str});}

Wxss

/ * pages/index/collect-money/collect-money.wxss * / page {background-color: # f8f8f8;} .bottom-handle {height: 100rpx; width: 100%; display: flex; align-items: center;}. Fixation-box {position: fixed; bottom: 0; width: 750rpx;} .sweep-code-verification {background: # fff; border-top: 1rpx solid # e3e3e3; width: 220rpx; color: # 333 }. Artificial-collection, .sweep-code-verification {height: 100%; display: flex; flex-direction: column; align-items: center; font-size: 24rpx; justify-content: center;}. Artificial-collection {background: # f3b055; width: 248rpx; color: # fff;}. Payment-code {background-image: linear-gradient (203deg, # 6f6f6f 0%, # 3c3c3c 96%); flex: 1; font-size: 34rpx; color: # fff Text-align: center; line-height: 100rpx;} .sweep-code-verification image {width: 40rpx; height: 40rpx;} .artificial-collection image {width: 40rpx; height: 40rpx;} .calculator-box {background-color: # fff;}. Calculator-line {display: flex; align-items: center;}. Boxtn {width: 25%; height: 154rpx; border-left: none; display: flex; align-items: center; justify-content: center }. Calculator-box .calculator-line:last-child {border-bottom: none;}. Calculator-line {border-bottom: 1rpx solid # dedede;} .btn1, .btn2 {border-right: 1rpx solid # dedede;}. Btn2 {width: 50%;} .equal {background: # f3b055; font-size: 61rpx; color: # fff;}. Num {font-size: 60rpx; color: # 000;}. Clear {font-size: 48rpx; color: # f3b055 }. Percent {font-size: 60rpx; color: # 000;}. Charge-content {background: # fff; border-radius: 24rpx; width: 540rpx; display: flex; flex-direction: column; align-items: center;}. Charge-title {background: # f3b055; border-radius: 12px 12px 00; width: 100%; height: 92rpx; font-size: 34rpx; line-height: 92rpx; text-align: center; color: # fff Charge-money {font-size: 60rpx; color: # 333; line-height: 84rpx; margin-top: 35rpx;}. Charge-propmt {font-size: 28rpx; color: # 999; line-height: 42rpx; padding-bottom: 40rpx;} .charge-btn {display: flex; align-items: center; height: 100rpx; border-top: 1rpx solid # ddd; width: 100%;}. Charge-cancel, .charge-confirm {flex: 1; text-align: center: Line-height: 100rpx; font-size: 34rpx;}. Charge-cancel {color: # 999; border-right: 1rpx solid # ddd;}. Charge-confirm {color: # f3b055;}. Successful-content {background: # fff; border-radius: 24rpx; width: 540rpx; display: flex; flex-direction: column; align-items: center;}. Success-icon {width: 120rpx; margin-top: 45rpx; height: 120rpx;}. Successful-title {font-size: 34rpx Color: # 333; line-height: 42rpx; padding: 30rpx 0; font-weight: 600;}. Clear-icon {width: 80rpx; height: 80rpx;} .calculate-box {position: fixed; top: 0; bottom: 875rpx; width: 100%; display: flex; flex-direction: column; align-items: flex-end; padding: 050rpx;}. Result-num {font-size: 88rpx; color: # 333; line-height 124rpx: }. Calculate-txt {font-size: 60rpx; color: # 333; line-height: 84rpx; margin-top: auto; word-wrap: break-word; text-align: right; word-break: break-all; text-overflow:-Omuri stories; overflow: hidden; text-overflow: ellipsis; display:-webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}. Suspend-box {height: 64rpx Background-color: rgba (0,0,0,0.5); position: fixed; top: 70rpx; left: 0; color: # fff; display: flex; align-items: center; font-size: 24rpx; padding: 020rpx; border-radius: 0 100rpx 100rpx 0; z-index: 9;}. Close-suspend {width: 30rpx; height: 30rpx;} "Mini Program how to achieve calculator function" content is introduced here, 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!

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.