javascript實現計算器功能詳解流程
1、計算器功能介紹
可以實現數據的加(+),減(-),乘(*),除(/),取餘運算(%),以及實現數據的刪除(Del)和清空功能(C)。
2、計算器頁面設計
1、導航欄部分
{ "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "navigationBarTitleText": "計算器" }
2、數據部分
data:{ // data中隻放置初始數據 num:"1", op:" "//記錄運算符號 }
3、index.wxml佈局頁面
<view class="result"> <view class="result-num">{{num}}</view> <view class="result-op">{{op}}</view> </view> <view class="btns"> <view> <view hover-class="bg" bindtap="reSetBtn">C</view> <view hover-class="bg" bindtap="delBtn">Del</view> <view hover-class="bg" bindtap="opBtn" data-val="%">%</view> <view hover-class="bg" bindtap="opBtn" data-val="/">/</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="7">7</view> <view hover-class="bg" bindtap="numBtn" data-val="8">8</view> <view hover-class="bg" bindtap="numBtn" data-val="9">9</view> <view hover-class="bg" bindtap="opBtn" data-val="*">*</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="4">4</view> <view hover-class="bg" bindtap="numBtn" data-val="5">5</view> <view hover-class="bg" bindtap="numBtn" data-val="6">6</view> <view hover-class="bg" bindtap="opBtn" data-val="-">-</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="1">1</view> <view hover-class="bg" bindtap="numBtn" data-val="2">2</view> <view hover-class="bg" bindtap="numBtn" data-val="3">3</view> <view hover-class="bg" bindtap="opBtn" data-val="+">+</view> </view> <view> <view hover-class="bg" bindtap="numBtn" data-val="0">0</view> <view hover-class="bg" bindtap="doBtn" data-val=".">.</view> <view hover-class="bg" bindtap="opBtn" data-val="=">=</view> </view> </view>
4、index.css樣式頁面
page{ display: flex; flex-direction: column;/*項目主軸的排列方向 */ height: 100%; } .result{ flex: 1;/*均勻分配元素*/ background: #f3f6fe; position: relative; } .result-num{ position: absolute;/*父相子絕*/ font-size: 20pt; bottom: 5vh; right: 3vw; } .result-op{ position: absolute; font-size: 15pt; bottom: 1vh; right: 3vw; } .btns{ flex: 1; display: flex; flex-direction: column;/*裡面的大view排列為垂直*/ font-size: 17pt; border-top: 1rpx solid #ccc; border-left: 1rpx solid #ccc; } .btns>view{ flex: 1; display: flex; } .btns>view>view{ flex-basis: 25%;/*寬度占比*/ border-bottom: 1rpx solid #ccc; border-right: 1rpx solid #ccc; box-sizing: border-box;/*加上邊框的占比*/ display:flex; align-items: center; justify-content: center;/*兩句加在一起是讓文字居中*/ } .btns>view:last-child>view:first-child{ flex-basis: 50%; } .btns>view:first-child>view:first-child{ color:#f00; } .btns>view>view:last-child{ color: #fcBe00; } .bg{ background: #eee; }
5、運行結果
3、功能實現部分
1、刪除功能
其中substr()函數中兩個參數,第一個表示截取開始的位置,第二個表示截取的長度
delBtn:function(e){ var num=this.data.num.substr(0,this.data.num.length-1); this.setData({num:num===""? "0":num}) }
2、清空功能
reSetBtn:function(e){ //全部變成初始狀態 this.result=null; this.isClear=false; this.setData({num:"0",op:""}) }
3、其他功能實現
data:{ // data中隻放置初始數據 num:"1", op:" "//記錄運算符號 }, result:null, isClear:false,//用來記錄狀態 numBtn:function(e){ var num =e.target.dataset.val//獲取data-val中的值 //如果多次按0或者isClear為true,則將原來的數據清除,顯示按的數字 if(this.data.num==='0'||this.isClear){ this.setData({num:num})//將獲取的值給result this.isClear=false }else{ this.setData({num:this.data.num+num}) } }, opBtn:function(e){ var op=this.data.op;//先記錄當前的op var num=Number(this.data.num);//獲取當前的num數據 this.setData({op:e.target.dataset.val});//把按下的按鈕給變量op if(this.isClear){//因為上面操作中有如果按瞭運算符,則isclear為true,在這裡為瞭避免多次按加都會起作用,再return return } this.isClear=true;//當用戶按瞭運算按鈕,再按數字,則把原來的數字清空 if(this.result===null){ this.result=num; return } if(op==="+"){ this.result=this.result+num this.setData({num:this.result})//把加出來的結果為num }else if(op==="-"){ this.result=this.result-num }else if(op==="*"){ this.result=this.result*num }else if(op==="/"){ this.result=this.result/num }else if(op==="%"){ this.result=this.result%num } this.setData({num:this.result+""})//轉為字符串類型 }, doBtn:function(e){ if(this.isClear){//表示上一個運算結束瞭,一開始就按.的話 this.setData({num:"0."}); this.isClear=false; return } //如果多按瞭. if(this.data.num.indexOf(".")>=0){ return } //正常數字後面按點 this.setData({num:this.data.num+"."}) },
到此這篇關於javascript實現計算器功能詳解流程的文章就介紹到這瞭,更多相關javascript 計算器內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!