微信小程序實現計算器功能的代碼怎么寫

蝸牛 互聯網技術資訊 2022-04-04 146 0

本篇內容介紹了“微信小程序實現計算器功能的代碼怎么寫”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠學有所成!

具體代碼如下:

wxml

<view?class="content">
??<input?value="{{calculation}}"></input>
??<view?class="box">
????<button?class="yellow-color">退格</button>
????<button?class="yellow-color"?bindtap="empty">清屏</button>
????<button?class="yellow-color">?</button>
????<button?bindtap="add"?data-text="+"?class="yellow-color">+</button>
??</view>

??<view?class="box">
????<button?bindtap="add"?data-text="9">9</button>
????<button?bindtap="add"?data-text="8">8</button>
????<button?bindtap="add"?data-text="7">7</button>
????<button?bindtap="add"?class="yellow-color"?data-text="-">-</button>
??</view>

??<view?class="box">
????<button?bindtap="add"?data-text="6">6</button>
????<button?bindtap="add"?data-text="5">5</button>
????<button?bindtap="add"?data-text="4">4</button>
????<button?bindtap="add"?class="yellow-color"?data-text="*">*</button>
??</view>

??<view?class="box">
????<button?bindtap="add"?data-text="3">3</button>
????<button?bindtap="add"?data-text="2">2</button>
????<button?bindtap="add"?data-text="1">1</button>
????<button?bindtap="add"?data-text="/"?class="yellow-color">÷</button>
??</view>

??<view?class="box">
????<button?bindtap="add"?data-text="0">0</button>
????<button?bindtap="add"?data-text=".">.</button>
????<button>歷史</button>
????<button?class="yellow-color"?bindtap="res">=</button>
??</view>


</view>

wxss

input?{
??width:?95%;
??height:?250rpx;
??margin:?0?auto;
??margin-bottom:?20rpx;
??border-bottom:?1rpx?solid?#ccc;
}

.box?{
??display:?flex;
}
button?{
??width:?20%;
??height:?150rpx;
??margin-bottom:?20rpx;
??line-height:?150rpx;
??background-color:rgb(0,?150,?250);
??color:?white;
}

.yellow-color?{
??background-color:?rgb(247,?142,?24)
}

JS

//index.js
//獲取應用實例
const?app?=?getApp()

Page({
??data:?{
????calculation:"",
????result:0,
????character:[],??//?運算符號
????operand:?[],????//?數字
????temp:false
??},

??//?輸入框輸入數據
??add:function(e)?{
????let?input?=?e.currentTarget.dataset.text;
????var?that?=?this;
????if?(input?==?"+"?||?input?==?"-"?||?input?==?"*"?||?input?==?"/")?{
??????this.data.temp?=?false;?//?用于記錄上一次是否是操作符
??????var?item?=?"character["?+?this.data.character.length+?"]";
??????this.setData({
????????[item]?:input
??????})?
????}?else?{
??????var?item?=?"operand["+this.data.operand.length+"]";
?????
??????if(that.data.temp)?{
????????//?拿到前一個的值
????????var?res?=?"operand["?+?(this.data.operand.length-1)?+?"]"
????????
????????var?ress=?that.data.operand.length-1;
????????var?xyz?=?that.data.operand[ress]?*?10?+?parseInt(input);
????????that.setData({
??????????[res]:xyz
????????})
??????}?else?{
????????input?=?parseInt(input);
????????that.data.temp?=?true;
????????that.setData({
??????????[item]:?input
????????})
??????}
????}
????//?將所有的內容放到顯示框中
????this.setData({
??????calculation:this.data.calculation+input
????})

??},

??//?計算答案
??res:function()?{
????console.log(this.data.character.length);
????console.log(this.data.operand.length)
????var?character_len?=??this.data.character.length?;
????var?operand_len?=?this.data.operand.length;
????console.log(operand_len?-?character_len)
????if(operand_len?-?character_len?==?1)?{
??????this.data.result?=?this.data.operand[0];
??????console.log("初始值"+this.data.result);
??????for(var?i=0;i<character_len;i++)?{
????????if(this.data.character[i]?==?"+")?{
??????????this.data.result?=?this.data.result?+?this.data.operand[i?+?1];

????????}
????????if?(this.data.character[i]?==?"-")?{
??????????this.data.result?=?this.data.result?-?this.data.operand[i?+?1];

????????}
????????if?(this.data.character[i]?==?"*")?{
??????????this.data.result?=?this.data.result?*?this.data.operand[i?+?1];

????????}
????????if?(this.data.character[i]?==?"/")?{
??????????this.data.result?=?this.data.result?/?this.data.operand[i?+?1];

????????}
????????
??????}
????}?else?{
??????this.setData({
????????result:"輸入有誤,清空數據,重新輸入"
??????})
????}

????this.setData({
?????calculation:this.data.result
????})
??},

??//?清空屏幕
??empty:function()?{
????this.setData({
??????calculation:?"",
??????result:?0,
??????character:?[],??//?運算符號
??????operand:?[],????//?數字
??????temp:?false
????}
??}
})

“微信小程序實現計算器功能的代碼怎么寫”的內容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業相關的知識可以關注蝸牛博客網站,小編將為大家輸出更多高質量的實用文章!

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:niceseo99@gmail.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

評論

日本韩欧美一级A片在线观看