版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領
文檔簡介
【移動應用開發(fā)技術】小程序怎么實現(xiàn)計算器功能
本篇內(nèi)容介紹了“小程序怎么實現(xiàn)計算器功能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓在下帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！實現(xiàn)模擬手機上的計算器，輸入即可運算本頁面是做一個計算收款的頁面，如果不需要下面的內(nèi)容可以刪除掉wxml<view
class="calculate-box">
<view
class="calculate-txt">{{express}}</view>
<view
class="result-num">={{result}}</view>
</view>
<view
class="fixation-box">
<view
class="calculator-box">
<view
class="calculator-line">
<view
data-con="c"
class="boxtn
btn1
clear"
catchtap="clickKeyBoard">AC</view>
<view
data-con="←"
class="boxtn
btn1"
catchtap="clickKeyBoard">
<image
src="../../../images/clear-icon.png"
class="clear-icon"></image>
</view>
<view
data-con="÷100"
class="boxtn
btn1
percent"
catchtap="clickKeyBoard">%</view>
<view
data-con="÷"
class="boxtn
num"
catchtap="clickKeyBoard">÷</view>
</view>
<view
class="calculator-line">
<view
data-con="7"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">7</view>
<view
data-con="8"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">8</view>
<view
data-con="9"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">9</view>
<view
data-con="×"
class="boxtn
num"
catchtap="clickKeyBoard">×</view>
</view>
<view
class="calculator-line">
<view
data-con="4"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">4</view>
<view
data-con="5"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">5</view>
<view
data-con="6"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">6</view>
<view
data-con="-"
class="boxtn
num"
catchtap="clickKeyBoard">-</view>
</view>
<view
class="calculator-line">
<view
data-con="1"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">1</view>
<view
data-con="2"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">2</view>
<view
data-con="3"
class="boxtn
btn1
num"
catchtap="clickKeyBoard">3</view>
<view
data-con="+"
class="boxtn
num"
catchtap="clickKeyBoard">+</view>
</view>
<view
class="calculator-line">
<view
data-con="0"
class="boxtn
btn2
num"
catchtap="clickKeyBoard">0</view>
<view
data-con="."
class="boxtn
btn1
num"
catchtap="clickKeyBoard">.</view>
<view
data-con="="
class="boxtn
equal"
catchtap="result">=</view>
</view>
</view>
<view
class="bottom-handle">
<!--
<view
class="sweep-code-verification"
bindtap="sweepCodeVerification">
<image
src="../../../images/sweep-code-verification.png"></image>
<text>掃碼核銷</text>
</view>
-->
<view
style="flex:
1;font-size:
34rpx;"
class="artificial-collection"
bindtap="artificial_collection">
<!--<image
src="../../../images/artificial-collection.png"></image>
-->
<text>人工收款</text>
</view>
<view
class="payment-code"
bindtap="qrcode_collection">收款碼收款</view>
</view>
</view>jsdata:
{
express:
"",
//第一行的表達式
result:
"0",
//第二行的結果
calc2:
{
str:
"",
//臨時字符串
strList:
[],
//中綴表達式存儲（隊列先進先出）
strListP:
[],
//后綴表達式（隊列先進先出）
list:
[],
//存放運算符的堆棧
（先進后出）
count:
[],
//計算表達式堆棧（先進后出）
flag:
0
//表示字符串最后一位是否是運算符號位
},
isqr:
false,
},
//給所有text或view綁定此事件，同時增加對應的自定義屬性值
clickKeyBoard(e)
{
let
that
=
this;
let
input
=
e.currentTarget.dataset.con
//獲取每次輸入的內(nèi)容
if
(input
==
"c")
{
that.handleClear();
}
else
if
(input
==
"←")
{
that.handleDelete();
}
else
{
//調(diào)用處理字符串
that.handleInfo(input);
}
},
//處理本地用戶的輸入操作
handleInfo(input)
{
if
(this.data.calc2.str.length
==
0)
{
//第一次點擊
if
(input
==
"-"
||
this.checkShuZi(input))
{
//為減號
this.addStr(input);
}
else
{
return;
}
}
else
{
if
(this.data.calc2.flag
==
1)
{
//說明最后一位是符號
if
(this.checkFuHao(input))
{
this.data.calc2.str
=
this.data.calc2.str.substring(0,
this.data.calc2.str.length
-
1);
//去掉最后一位符號，添加最新的符號進去
this.addStr(input);
}
else
{
this.addStr(input);
}
console.log();
}
else
{
this.addStr(input);
this.result();
}
}
this.result();
},
//客戶點擊等號了
result()
{
//每次點擊等號重新把列表給空
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.expressToStrList(this.data.express);
console.log(this.data.calc2.strList);
//將中綴表達式集合賦值給臨時變量
let
tempList
=
this.data.calc2.strList;
this.expressToStrListP(tempList);
console.log(this.data.calc2.strListP);
//最終的計算
let
tempP
=
this.data.calc2.strListP
for
(let
m
in
tempP)
{
if
(this.checkFuHao2(tempP[m]))
{
//不含點號的符號方法判斷
let
m1
=
this.data.calc2.count[0];
//取出第一個數(shù)據(jù)
this.data.calc2.count.shift();
//取出后刪除該數(shù)據(jù)
let
m2
=
this.data.calc2.count[0];
this.data.calc2.count.shift();
//
console.log("m1是"
+m1);
//
console.log("m2是"
+
m2);
//
console.log("運算符是"
+
tempP[m]);
//
console.log("計算結果是："
+
this.countDetail(m2,
tempP[m],
m1));
this.data.calc2.count.unshift(this.countDetail(m2,
tempP[m],
m1));
//將計算結果放到count中
}
else
{
this.data.calc2.count.unshift(tempP[m])
//將數(shù)字壓進去
}
}
console.log("最終的計算結果是"
+
parseFloat(this.data.calc2.count[0]).toFixed(2));
this.setData({
result:
this.data.calc2.count[0]
});
},
//實際具體計算
countDetail(e1,
e2,
e3)
{
let
result
=
0.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;
},
//將中綴表達式集合轉(zhuǎn)變?yōu)楹缶Y表達式集合
expressToStrListP(tempList)
{
for
(let
item
in
tempList)
{
if
(this.checkFuHao2(tempList[item]))
{
//不含點號的符號方法判斷
if
(this.data.calc2.list.length
==
0)
{
this.data.calc2.list.unshift(tempList[item]);
//直接添加添加運算符
}
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]);
//將運算符都放到listP中
}
this.data.calc2.list.length
=
0;
//循環(huán)完把list置空
this.data.calc2.list.unshift(tempList[item]);
//加新元素進去
}
else
{
this.data.calc2.list.unshift(tempList[item]);
//直接添加添加運算符
}
}
}
else
{
this.data.calc2.strListP.push(tempList[item]);
//數(shù)字直接加到后綴集合中
}
}
//循環(huán)完有可能最后一個是數(shù)字了，取到的不是字符，那么運算符里剩余的還的加到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]);
//將運算符都放到listP中
}
this.data.calc2.list.length
=
0;
//循環(huán)完把list置空
}
},
//判斷兩個運算符的優(yōu)先級(m1是list集合中最后加進去的那個元素比較將要進來的元素，如果m1比m2大，彈出list集合到listp中，再把m2加到list中，否則直接將m2加入list)
checkFuHaoDX(m1,
m2)
{
if
((m1
==
"%"
||
m1
==
"×"
||
m1
==
"÷")
&&
(m2
==
"-"
||
m2
==
"+"))
{
return
true;
}
else
{
return
false;
}
},
//將字符串表達式變成中綴隊列
expressToStrList(express)
{
let
temp
=
"";
//定義臨時變量
//將表達式改為中綴隊列
for
(let
i
=
0;
i
<
express.length;
i++)
{
if
(i
==
0
&&
express[i]
==
"-")
{
temp
=
temp
+
express[i];
}
else
{
if
(this.checkShuZi2(express[i]))
{
//如果i是數(shù)字
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];
}
}
}
}
//循環(huán)到最后再看temp中有沒有數(shù)字了，如果有加進來
if
(temp.length
>
0
&&
this.checkShuZi(temp.substring(temp.length
-
1)))
{
this.data.calc2.strList.push(parseFloat(temp));
temp
=
"";
}
},
//處理客戶輸入清除鍵
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:
""
});
},
//處理客戶輸入回退鍵
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;
}
},
//判斷是否是運算符（含點號，用在組織表達式時
.不能重復輸入）
checkFuHao(input)
{
if
(input
==
"-"
||
input
==
"+"
||
input
==
"÷"
||
input
==
"%"
||
input
==
"×"
||
input
==
".")
{
return
true;
}
else
{
return
false;
}
},
//判斷是否是運算符（不含點號）
checkFuHao2(input)
{
if
(input
==
"-"
||
input
==
"+"
||
input
==
"÷"
||
input
==
"%"
||
input
==
"×")
{
return
true;
}
else
{
return
false;
}
},
//判斷是否是數(shù)字
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;
}
},
//判斷是否是數(shù)字(包含.號，用在表達式轉(zhuǎn)中綴方法中)
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;
}
},
//給字符串添加新字符(直接追加
在判斷是否要改變變量flag)
addStr(input)
{
this.data.calc2.str
=
this.data.calc2.str
+
input;
if
(this.checkFuHao(input))
{
this.data.calc2.flag
=
1;
//設置標記位位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
0
0;
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
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 口腔科醫(yī)生培訓
- 口腔洽談師培訓
- 口腔放射課件
- 口腔衛(wèi)生課件
- 口腔醫(yī)學課件
- 口腔前臺接待禮儀培訓
- 口腔修復基本知識
- 2026年企業(yè)活動執(zhí)行部工作計劃
- 游樂園衛(wèi)生管理制度
- 2026糧油質(zhì)檢化驗試題及答案
- 口腔門診醫(yī)患溝通技巧
- 浸沒光刻機照明系統(tǒng)光學元件應力雙折射的多維探究與優(yōu)化策略
- DBJ50T-100-2022 建筑邊坡工程施工質(zhì)量驗收標準
- 《透水混凝土路面應用技術規(guī)程》DB33∕T 1153-2018
- FZ∕T 73037-2019 針織運動襪行業(yè)標準
- 電外科設備安全使用
- (完整版)四年級上冊數(shù)學豎式計算題100題直接打印版
- 新生兒疫苗接種的注意事項與應對措施
- 青島生建z28-75滾絲機說明書
- DEFORM在汽車零件冷鍛工藝中的應用
- 廣州市自來水公司招聘試題
評論
0/150
提交評論