快捷導(dǎo)航

微信小程序?qū)崿F(xiàn)簡易的計(jì)算器功能

更新時(shí)間：2022年09月09日 10:29:34 作者：SepbreeZe

這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡易的計(jì)算器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

一個(gè)初入IC的硅農(nóng)，硬件編程經(jīng)驗(yàn)3個(gè)月。偶然接觸了微信小程序編程，然后自己寫了一個(gè)計(jì)算器，希望得到改進(jìn)意見。

功能：

1、計(jì)算 + - * /和%；

2、主要是當(dāng)?shù)贸鼋Y(jié)果的時(shí)候，可以顯示原來的數(shù)都是什么。用手機(jī)上的計(jì)算器都是一按等于號(hào)，我的兩個(gè)操作數(shù)也沒了，很煩。所以自己寫的時(shí)候就在得到結(jié)果的時(shí)候操作數(shù)不變。

計(jì)算器樣子就是下面這樣子：

樣子不太會(huì)設(shè)計(jì)，主要是js部分啦。

WXML代碼

由于wxml的很多方法和屬性我都還不太了解，所以有的設(shè)置方法可能顯得繁瑣。

<!--pages/caculator/caculator.wxml-->
<!-- 計(jì)算區(qū) -->
<view class="caculatorArea">
? <!-- 顯示數(shù)據(jù)與運(yùn)算符 -->
? <view class="dataArea1">{{firstNum}}</view>
? <view class="dataArea2">{{operatorShow}}</view>
? <view class="dataArea3">{{secondNum}}</view>
? <!-- 顯示結(jié)果 -->
? <view class="resultArea">result: ? {{result}}</view>
</view>
<!-- 輸入?yún)^(qū) -->
<view class="inputArea">
<!-- 按鍵第一排 -->
? <view class="fstRaw"> ?
? ? <button class="clear" bindtap="clearEvent" data-value="C" >C</button>
? ? <button class="divide" bindtap="opEvent" ?data-value="/">/</button>
? ? <button class="mutiply" bindtap="opEvent" data-value="*">*</button>
? ? <button class="back" bindtap="backEvent" data-value="←">←</button>
? </view>
? <!-- 按鍵第二排 -->
? <view class="secRaw"> ?
? ? <button class="seven" bindtap="numEvent" data-value="7">7</button>
? ? <button class="eight" bindtap="numEvent" data-value="8" >8</button>
? ? <button class="nine" bindtap="numEvent" data-value="9">9</button>
? ? <button class="minus" bindtap="opEvent" data-value="-">-</button>
? </view>
? ?<!-- 按鍵第三排 -->
? ?<view class="thdRaw"> ?
? ? <button class="four" bindtap="numEvent" data-value="4">4</button>
? ? <button class="five" bindtap="numEvent" data-value="5">5</button>
? ? <button class="six" bindtap="numEvent" data-value="6">6</button>
? ? <button class="plus" bindtap="opEvent" data-value="+">+</button>
? </view>
? ? ?<!-- 按鍵第四排 -->
? <view class="forRaw"> ??
? ? <button class="one" bindtap="numEvent" data-value="1">1</button>
? ? <button class="two" bindtap="numEvent" ?data-value="2">2</button>
? ? <button class="three" bindtap="numEvent" data-value="3">3</button>
? ? <button class="equal" bindtap="opEvent" data-value="=">=</button>
? </view>
? ? ?<!-- 按鍵第五排 -->
? <view class="fifRaw"> ?
? ? <button class="abs" bindtap="opEvent" data-value="%">%</button>
? ? <button class="zero" bindtap="numEvent" data-value="0">0</button>
? ? <button class="dot" bindtap="dotEvent" data-value=".">.</button>
? </view>
</view>

js代碼

這個(gè)代碼是真的讓我快崩了，最后達(dá)到的效果，能跑就行。。由于軟件的代碼寫的很少，所以在一些判斷的時(shí)候顯得很繁瑣。比如如何區(qū)分目前輸入的數(shù)字是屬于第一個(gè)操作數(shù)還是第二個(gè)操作數(shù)（因?yàn)槲蚁朐趦尚酗@示數(shù)字，因此這就成了一個(gè)問題），我的辦法是設(shè)置了一個(gè)flag，請(qǐng)問有沒有知道更簡單的方法的？

Page({
? ? data:{
? ? ? result:"", ? ?
? ? ? firstNum:"",?
? ? ? secondNum:"",
? ? ? operatorUse:"",
? ? ? operatorShow:"",
? ? },
? ? var rst=""
? ? numFlag:true,
? ? optContinue:false,
? ? resultFlag:false, ?// ?結(jié)果標(biāo)志位 ? ? 1代表有結(jié)果，0代表沒結(jié)果
? ? fstIsClear:true, ? ? ?// ?第一個(gè)數(shù)字是否清除標(biāo)志位 ? 1代表前面沒數(shù)，0代表有數(shù)
? ? secIsClear:true, ? ? ?//第二個(gè)數(shù)字是否清除的標(biāo)志位 ? 1代表前面沒數(shù)，0代表有數(shù)
? ? numEvent(n){
? ? ? ? let numValue=n.currentTarget.dataset.value;
? ? ? ? if(this.resultFlag==true){ ? ? ? ? //如果得出了結(jié)果，并且按數(shù)字鍵的話，那么直接進(jìn)行下一個(gè)計(jì)算，當(dāng)前計(jì)算結(jié)束
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? firstNum:numValue,
? ? ? ? ? ? ? ? secondNum:"",
? ? ? ? ? ? ? ? secIsClear:true,
? ? ? ? ? ? ? ? operatorShow:"",
? ? ? ? ? ? ? ? operatorUse:""?
? ? ? ? ? ? })
? ? ? ? ? ? this.resultFlag=false
? ? ? ? }else if(this.numFlag==true){ ? ? //如果此時(shí)沒有按操作符，則歸為第一個(gè)數(shù) ??
? ? ? ? ? ? if(this.data.firstNum=="0"){ ?//假如第一個(gè)數(shù)現(xiàn)在是0，那么0不進(jìn)行保存
? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? ? firstNum:numValue ? ? ?
? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? //如果第一個(gè)數(shù)不是0，那么進(jìn)行拼接 ? ? ? ? ? ?
? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? ? firstNum:this.data.firstNum+numValue ? ? ?
? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? this.fstIsClear=false;
? ? ? ? ? ? }}else{ ? ? ? ? ? ? ? ? ? ? ? ? ?//如果此時(shí)已經(jīng)按過操作符，則歸為第二個(gè)數(shù)
? ? ? ? ? ? ? ?if(this.data.secondNum=="0"){//假如第二個(gè)數(shù)現(xiàn)在是0，那么0不進(jìn)行保存
? ? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? ? secondNum:numValue ? ? ??
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }else{ ? ? ? ? ? ? ??
? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? ? secondNum:this.data.secondNum+numValue ? ? ??
? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? this.secIsClear=false;
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? opEvent(o){
? ? ? ? let optLast=this.data.operatorUse;
? ? ? ? let optCurrent=o.currentTarget.dataset.value;
? ? ? ? if(optCurrent!=null && this.data.secondNum=="" && this.data.fisrtdNum==""){
? ? ? ? ? ? this.numFlag=true; //都為空時(shí)，連續(xù)點(diǎn)擊操作符不更換數(shù)字順序
? ? ? ? }else if(optCurrent!=null && this.data.secondNum=="" && this.data.fisrtdNum!=""){
? ? ? ? ? ? if(optCurrent=="="){
? ? ? ? ? ? ? ? this.numFlag=true;
? ? ? ? ? ? }else{?
? ? ? ? ? ? this.numFlag=false;//1有數(shù)2沒數(shù)時(shí)，連續(xù)點(diǎn)擊操作符，再次點(diǎn)擊數(shù)字歸為第二個(gè)
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? else if(optCurrent!=null && this.data.secondNum!=""&& this.data.fisrtdNum!=""){?
? ? ? ? ? ? ?if(optCurrent=="="){ ? ? ??
? ? ? ? ? ? ? ? ?this.numFlag=!this.numFlag; //都不為空時(shí)，點(diǎn)擊操作符后，數(shù)字綁定的順序改變
? ? ? ? ? ? ?}else{
? ? ? ? ? ? ? ? this.numFlag=false;
? ? ? ? ? ? ?}
? ? ? ? }
? ? ? ? if(optLast=="="){
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? firstNum:rst,?
? ? ? ? ? ? ? ? secondNum:"",
? ? ? ? ? ? ? ? secIsClear:true,
? ? ? ? ? ? ? ? result:"" ??
? ? ? ? ? ? ? });
? ? ? ? ? ? ? this.resultFlag=false;
? ? ? ? }
? ? ? ? rst=Number(this.data.firstNum) ? ? //將第一個(gè)數(shù)轉(zhuǎn)換為數(shù)字類型
? ? ? ? var secNum=Number(this.data.secondNum) ? ?//將第二個(gè)數(shù)轉(zhuǎn)換為數(shù)字類型
?
? ? ? ? this.setData({
? ? ? ? ? ? operatorUse:optCurrent ? ? ? ? //得到操作符,用于js判斷
? ? ? ? });
? ? ? ? if(optCurrent=="="){ ? ? ? ? ? ? ? //得到操作符，用于wxml顯示?
? ? ? ? ? if(optLast!="="){
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? operatorShow:optLast
? ? ? ? ? ? }); ?
? ? ? ? }else{
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? operatorShow:""
? ? ? ? ? ? }); ?
? ? ? ? } ? ? ? ? ? ? ? ??
? ? ? ? }else{
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? operatorShow:optCurrent
? ? ? ? ? ? }) ? ? ? ??
? ? ? ? }
? ? ? ? if(optLast=="+"){ ? ? ? ? ? ? ? ? ? ? ? ? ? ? //依據(jù)操作符進(jìn)行操作
? ? ? ? ? ? rst=rst+secNum;
? ? ? ? }else if(optLast=="-"){
? ? ? ? ? ? rst=rst-secNum ; ??
? ? ? ? }else if(optLast=="*"){
? ? ? ? ? ? rst=rst*secNum;
? ? ? ? }else if(optLast=="/"){
? ? ? ? ? ? rst=rst/secNum;
? ? ? ? }else if(optLast=="%"){
? ? ? ? ? ? rst=rst%secNum;
? ? ? ? } ? ? ?
? ? ? ? if(optCurrent=="="){ ? ? ? ? ?//當(dāng)輸入的操作符為=時(shí)，進(jìn)行結(jié)果顯示
? ? ? ? ? ? this.setData({
? ? ? ? ? ? result:rst
? ? ? ? ? ? })
? ? ? ? ? ? this.resultFlag=true
? ? ? ? }
? ? ? ? if(optCurrent!="=" && optLast!=""){
? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? firstNum:rst,?
? ? ? ? ? ? ? ? secondNum:"",
? ? ? ? ? ? ? ? secIsClear:true,
? ? ? ? ? ? ? ? result:"" ??
? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? this.resultFlag=false; ?//表明此時(shí)有結(jié)果了
? ? ? ? ? ? ? ? this.optContinue=true; ?//表明要進(jìn)行連續(xù)計(jì)算了
? ? ? ? }
? ? },
? ? dotEvent(){
? ? ? ? ? if(this.numFlag==true){
? ? ? ? ? ? ? if(this.fstIsClear==true){
? ? ? ? ? ? ? ? this.fstIsClear==false?
? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? ? firstNum:"0."
? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? }else{ ? ? ? ? ? ? ? ? ? ? //如果此前有數(shù)，則輸入.為.
? ? ? ? ? ? ? ? if(this.data.firstNum.indexOf(".")>0){
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }else{ ? ??
? ? ? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? ? firstNum:this.data.firstNum+"."
? ? ? ? ? ? ? ? });
? ? ? ? ? ? }
? ? ? ? ? ? } ? ? ? ? ? ?
? ? ? ? ? }else{
? ? ? ? ? ? ?if(this.secIsClear==true){?
? ? ? ? ? ? ? ? this.secIsClear==false?
? ? ? ? ? ? ? ?this.setData({
? ? ? ? ? ? ? ? ? secondNum:"0."
? ? ? ? ? ? ? })
? ? ? ? ? }else{
? ? ? ? ? ? ? if(this.data.secondNum.indexOf(".")>0){
? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? this.setData({
? ? ? ? ? ? ? ? ? secondNum:this.data.secondNum+"."
? ? ? ? ? ? })
? ? ? ? }
? ? ? ? }
? ? }
},
? ? backEvent(){
? ? ? ? var fstNumDel=0;
? ? ? ? var secNumDel=0; ?
? ? if(this.resultFlag==true){
? ? ? ? return;
? ? }else{
? ? ? if(this.numFlag==true){
? ? ? ? fstNumDel=this.data.firstNum.substr(0,this.data.firstNum.length-1);
? ? ? ? this.setData({
? ? ? ? ? ? firstNum:fstNumDel
? ? ? ? });
? ? ? ? if(this.data.firstNum==""){
? ? ? ? ? ? this.fstIsClear=true;
? ? ? ? }
? ? }else{
? ? ? ? secNumDel=this.data.secondNum.substr(0,this.data.secondNum.length-1);
? ? ? ? this.setData({
? ? ? ? ? ? secondNum:secNumDel
? ? ? ? });
? ? ? ? if(this.data.secondNum==""){
? ? ? ? ? ? this.secIsClear=true;
? ? ? ? }
? ? }
? ? }
?
},
? ? clearEvent(){
? ? ? this.setData({
? ? ? ? firstNum:"",
? ? ? ? secondNum:"",
? ? ? ? operatorUse:"",
? ? ? ? operatorShow:"",
? ? ? ? result:""
? ? ? })
? ? ? this.numFlag=true;
? ? ? this.resultFlag=false;
? ? ? this.isClear=true;
? ? ? this.fstIsClear=true;
? ? ? this.secIsClear=true;
}
?
})

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: