微信小程序?qū)崿F(xiàn)簡易計算器
更新時間：2021年07月19日 11:13:33 作者：@夏目
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡易計算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
微信小程序之簡易計算器，供大家參考，具體內(nèi)容如下
一、介紹
1.中綴表達(dá)式
中綴表達(dá)式是一種通用的算術(shù)或邏輯公式表示方法，操作符以中綴形式處于操作數(shù)的中間。中綴表達(dá)式是人們常用的算術(shù)表示方法。
雖然人的大腦很容易理解與分析中綴表達(dá)式，但對計算機(jī)來說中綴表達(dá)式卻是很復(fù)雜的，因此計算表達(dá)式的值時，通常需要先將中綴表達(dá)式轉(zhuǎn)換為前綴或后綴表達(dá)式，然后再進(jìn)行求值。對計算機(jī)來說，計算前綴或后綴表達(dá)式的值非常簡單。
2.后綴表達(dá)式
從左至右掃描表達(dá)式，遇到數(shù)字時，將數(shù)字壓入堆棧，遇到運算符時，彈出棧頂?shù)膬蓚€數(shù)，用運算符對它們做相應(yīng)的計算（次頂元素 op 棧頂元素），并將結(jié)果入棧；重復(fù)上述過程直到表達(dá)式最右端，最后運算得出的值即為表達(dá)式的結(jié)果。
例:
(1)8+4-62用后綴表達(dá)式表示為:
8 4+6 2-
(2)2*(3+5)-4+7/1用后綴表達(dá)式表示為:
3 5+2*7 1/4-+
例如后綴表達(dá)式“3 4 + 5 × 6 -”：
(1) 從左至右掃描，將3和4壓入堆棧；
(2) 遇到+運算符，因此彈出4和3（4為棧頂元素，3為次頂元素，注意與前綴表達(dá)式做比較），計算出3+4的值，得7，再將7入棧；
(3) 將5入棧；
(4) 接下來是×運算符，因此彈出5和7，計算出7×5=35，將35入棧；
(5) 將6入棧；
(6) 最后是-運算符，計算出35-6的值，即29，由此得出最終結(jié)果。
二、程序代碼
1.代碼
app.js配置代碼如下：
// app.js
App({
onLaunch() {
// 展示本地存儲能力
const logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登錄
wx.login({
success: res => {
// 發(fā)送 res.code 到后臺換取 openId, sessionKey, unionId
}
})
},
globalData: {
userInfo: null
},
calculator:{
express:'', //臨時字符串
strList:[], //中綴表達(dá)式存儲（隊列先進(jìn)先出）
strListP:[], //后綴表達(dá)式（隊列先進(jìn)先出）
list:[], //存放運算符的堆棧 （先進(jìn)后出）
calculate:[] //計算表達(dá)式堆棧（先進(jìn)后出）
}
})
2.邏輯代碼
calculator.js代碼如下：
// pages/calculator/calculator.js
const app = getApp()
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
operators: ['AC', 'DEL', '%', '/', '7', '8', '9', '×', '4', '5', '6', '+', '1', '2', '3', '-', '0', '.'],
res: '=',
expression: '0',
},
clearAll() {
this.setData({
expression: '0',
result: ''
})
},
click: function (event) {
const val = event.target.dataset.value;
if (val == 'AC') {
this.clearAll();
} else if (val == 'DEL') {
if (this.data.expression != '0') {
const res = this.data.expression.substr(0, this.data.expression.length - 1);
this.setData({
expression: res
})
}
} else {
var len = this.data.expression.length;
var s = this.data.expression.substring(len - 1, len);
if ((this.checkOperator(s)) && this.checkOperator(val)) {
const res = this.data.expression.substr(0, this.data.expression.length);
this.setData({
expression: res
})
} else {
if ((this.data.expression == '0') && (val == '.')) {
this.setData({
expression: this.data.expression + String(val)
})
} else {
this.setData({
expression: this.data.expression === '0' ? val : this.data.expression + String(val)
})
}
}
}
},
result() {
app.calculator.strList.length = 0;
app.calculator.strListP.length = 0;
app.calculator.list.length = 0;
app.calculator.calculate.length = 0;
this.expressToStrList(this.data.expression);
let tempList = app.calculator.strList;
this.expressToStrListP(tempList);
let tempP = app.calculator.strListP
for (let m in tempP) {
if (this.checkOperator(tempP[m])) {
let op1 = app.calculator.calculate[0];
app.calculator.calculate.shift();
let op2 = app.calculator.calculate[0];
app.calculator.calculate.shift();
app.calculator.calculate.unshift(this.countDetail(op2, tempP[m], op1));
} else {
app.calculator.calculate.unshift(tempP[m])
}
}
this.setData({
result: app.calculator.calculate[0]
});
},
countDetail(num1, operator, num2) {
let result = 0.0;
try {
if (operator == "×") {
result = parseFloat(num1) * parseFloat(num2);
} else if (operator == "/") {
result = parseFloat(num1) / parseFloat(num2);
} else if (operator == "%") {
result = parseFloat(num1) % parseFloat(num2);
} else if (operator == "+") {
result = parseFloat(num1) + parseFloat(num2);
} else {
result = parseFloat(num1) - parseFloat(num2);
}
} catch (error) {
}
return result;
},
expressToStrListP(tempList) {//將中綴表達(dá)式集合轉(zhuǎn)變?yōu)楹缶Y表達(dá)式集合
for (let item in tempList) {
if (this.checkOperator(tempList[item])) {
if (app.calculator.list.length == 0) {
app.calculator.list.unshift(tempList[item]);
} else {
if (this.compaerOperator(app.calculator.list[0], tempList[item])) {
for (let x in app.calculator.list) {
app.calculator.strListP.push(app.calculator.list[x]);
}
app.calculator.list.length = 0;
app.calculator.list.unshift(tempList[item]);
} else {
app.calculator.list.unshift(tempList[item]);
}
}
} else {
app.calculator.strListP.push(tempList[item]);
}
}
if (app.calculator.list.length > 0) {
for (let x in app.calculator.list) {
app.calculator.strListP.push(app.calculator.list[x]);
}
app.calculator.list.length = 0;
}
},
compaerOperator(op1, op2) {
if ((op1 == "%" || op1 == "×" || op1 == "/") && (op2 == "-" || op2 == "+")) {
return true;
} else {
return false;
}
},
expressToStrList(expression) { //將字符串表達(dá)式變成中綴隊列
let temp = '';
for (let i = 0; i < expression.length; i++) {
if (i == 0 && expression[i] == "-") {
temp = temp + expression[i];
} else {
if (this.checkDigit(expression[i])) {
temp = temp + expression[i];
} else {
if (temp.length > 0) {
if (expression[i] == ".") {
temp = temp + expression[i];
} else {
app.calculator.strList.push(parseFloat(temp));
temp = '';
app.calculator.strList.push(expression[i]);
}
} else {
temp = temp + expression[i];
}
}
}
}
if (temp.length > 0 && this.checkDigit(temp.substring(temp.length - 1))) {
app.calculator.strList.push(parseFloat(temp));
temp = '';
}
},
//判斷是否是運算符
checkOperator(input) {
if (input == "-" || input == "+" || input == "/" || input == "%" || input == "×") {
return true;
} else {
return false;
}
},
//判斷是否是數(shù)字
checkDigit(input) {
if ((/^[0-9]*$/.test(input))) {
return true;
} else {
return false;
}
},
})
3.界面代碼
calculator.js代碼如下：
<!--pages/calculator/calculator.wxml-->
<view class="contaniner">
<view class="displayer">
<view class="text">{{expression}}</view>
<view class="result">={{result}}</view>
</view>
<view class="btnArea">
<block wx:for="{{operators}}">
<view class="btn" data-value="{{item}}" capture-bind:tap="click">{{item}}</view>
</block>
<view class="btn btn1" data-value="{{res}}" bindtap="result">{{res}}</view>
</view>
</view>
4.樣式代碼
calculator.js代碼如下：
/* pages/calculator/calculator.wxss */
.container1{
width: 100%;
height: 100%;
}
.displayer{
border: 1px solid #f1f3f3;
width: 100%;
height: 602
rpx;
font-size: 45rpx;
background-color: rgba(241, 243, 243, 1.0);
}
.btnArea{
display: flex;
flex-flow: row wrap;
justify-content: flex-start;
padding: 3rpx;
margin: 0;
background-color: rgb(241, 243, 243);
}
.btn{
width: 185rpx;
display: flex;
align-items: center;
height: 120rpx;
justify-content: center;
border: 1rpx solid #e8eaeb;
color: black;
background-color: #F7F8F9;
}
.btn1{
width: 370rpx;
}
.text{
width: 100%;
height: 10%;
text-align: right;
margin-top: 470rpx;
background-color: rgba(241, 243, 243, 1.0);
position: absolute;
word-break: break-word;
}
.result{
width: 100%;
height: 58rpx;
text-align: right;
margin-top: 530rpx;
background-color: rgba(241, 243, 243, 1.0);
position: absolute;
word-break: break-word;
}
三.程序截圖
四.總結(jié)
使用數(shù)組來實現(xiàn)堆棧，然后將表達(dá)式轉(zhuǎn)為中綴表達(dá)式，再轉(zhuǎn)成后綴表達(dá)式，利用堆棧實現(xiàn)計算。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
大家對下拉菜單并不陌生吧，下面為大家介紹下使用js實現(xiàn)下拉菜單語言選項，具體實現(xiàn)如下，喜歡的朋友可以看看2013-09-09
這篇文章主要介紹了JavaScript事件用法,較為詳細(xì)的分析了javascript事件流、事件類型及事件操作技巧,需要的朋友可以參考下2016-10-10
js拖動div 當(dāng)鼠標(biāo)移動時整個div也相應(yīng)的移動
要拖動的div為最外層的div，這段代碼對顯示對話框的頭部綁定鼠標(biāo)監(jiān)聽事件，當(dāng)鼠標(biāo)移動時，整個div也相應(yīng)的移動，具體的實現(xiàn)如下，感興趣的朋友可以參考下2013-11-11
這篇文章主要為大家詳細(xì)介紹了使用Javascript在HTML中顯示實時時間，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
數(shù)組想必大家對它并不陌生吧，有些新手朋友們都不知道如何移除數(shù)組元素，下面為大家介紹個示例，喜歡的朋友可以了解下2013-09-09
如何基于uni-app實現(xiàn)微信小程序一鍵登錄與退出登錄功能
uni-app 是使用vue的語法+小程序的標(biāo)簽和API的一套框架,是一套代碼多端使用,目前是大前端的一種趨勢,下面這篇文章主要給大家介紹了關(guān)于如何基于uni-app實現(xiàn)微信小程序一鍵登錄與退出登錄功能的相關(guān)資料,需要的朋友可以參考下2022-09-09
深入理解JavaScript系列（29）：設(shè)計模式之裝飾者模式詳解
這篇文章主要介紹了深入理解JavaScript系列（29）：設(shè)計模式之裝飾者模式詳解,裝飾者用用于包裝同接口的對象,不僅允許你向方法添加行為,而且還可以將方法設(shè)置成原始對象調(diào)用（例如裝飾者的構(gòu)造函數(shù)）,需要的朋友可以參考下2015-03-03
JavaScript 全面解析各種瀏覽器網(wǎng)頁中的JS 執(zhí)行順序
近來我通過一些測試以全面的解析網(wǎng)頁在各種瀏覽器中的JavaScript代碼的執(zhí)行順序，在這兒做個記錄。2009-02-02
這篇文章主要介紹了JavaScript?自定義對象,主要介紹一些方法object創(chuàng)建對象、使用構(gòu)造函數(shù)創(chuàng)建對象、字面量創(chuàng)建對象、等展開話題，具有一定的參考價值，需要的小伙伴可以參考一下2021-12-12
一個友好的.改善的 Object.prototype.toString的實現(xiàn)
一個友好的.改善的 Object.prototype.toString的實現(xiàn)...2007-04-04