javascript實現(xiàn)計算器功能詳解流程
1、計算器功能介紹
可以實現(xiàn)數(shù)據(jù)的加(+),減(-),乘(*),除(/),取余運算(%),以及實現(xiàn)數(shù)據(jù)的刪除(Del)和清空功能(C)。
2、計算器頁面設(shè)計
1、導(dǎo)航欄部分
{ "navigationBarBackgroundColor": "#fff", "navigationBarTextStyle": "black", "navigationBarTitleText": "計算器" }
2、數(shù)據(jù)部分
data:{ // data中只放置初始數(shù)據(jù) num:"1", op:" "http://記錄運算符號 }
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、運行結(jié)果
3、功能實現(xiàn)部分
1、刪除功能
其中substr()函數(shù)中兩個參數(shù),第一個表示截取開始的位置,第二個表示截取的長度
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){ //全部變成初始狀態(tài) this.result=null; this.isClear=false; this.setData({num:"0",op:""}) }
3、其他功能實現(xiàn)
data:{ // data中只放置初始數(shù)據(jù) num:"1", op:" "http://記錄運算符號 }, result:null, isClear:false,//用來記錄狀態(tài) numBtn:function(e){ var num =e.target.dataset.val//獲取data-val中的值 //如果多次按0或者isClear為true,則將原來的數(shù)據(jù)清除,顯示按的數(shù)字 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;//先記錄當(dāng)前的op var num=Number(this.data.num);//獲取當(dāng)前的num數(shù)據(jù) this.setData({op:e.target.dataset.val});//把按下的按鈕給變量op if(this.isClear){//因為上面操作中有如果按了運算符,則isclear為true,在這里為了避免多次按加都會起作用,再return return } this.isClear=true;//當(dāng)用戶按了運算按鈕,再按數(shù)字,則把原來的數(shù)字清空 if(this.result===null){ this.result=num; return } if(op==="+"){ this.result=this.result+num this.setData({num:this.result})//把加出來的結(jié)果為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+""})//轉(zhuǎn)為字符串類型 }, doBtn:function(e){ if(this.isClear){//表示上一個運算結(jié)束了,一開始就按.的話 this.setData({num:"0."}); this.isClear=false; return } //如果多按了. if(this.data.num.indexOf(".")>=0){ return } //正常數(shù)字后面按點 this.setData({num:this.data.num+"."}) },
到此這篇關(guān)于javascript實現(xiàn)計算器功能詳解流程的文章就介紹到這了,更多相關(guān)javascript 計算器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ajax提交表單實現(xiàn)網(wǎng)頁無刷新注冊示例
這篇文章主要介紹了ajax提交表單實現(xiàn)網(wǎng)頁無刷新注冊示例,需要的朋友可以參考下2014-05-05淺談javascript中關(guān)于日期和時間的基礎(chǔ)知識
下面小編就為大家?guī)硪黄獪\談javascript中關(guān)于日期和時間的基礎(chǔ)知識。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07JavaScript使用escape()、encodeURI()和decodeURI()實現(xiàn)URI編碼解碼
這篇文章介紹了JavaScript使用escape()、encodeURI()和decodeURI()實現(xiàn)URI編碼解碼的方法,文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05Javascript基礎(chǔ)知識(三)BOM,DOM總結(jié)
本文是基礎(chǔ)知識系列的第三篇文章,主要介紹javascript中BOM,DOM的一些心得總結(jié),非常實用,有需要的朋友可以參考下2014-09-09JavaScript instanceof 的使用方法示例介紹
判斷一個變量的類型嘗嘗會用 typeof 運算符而他畢竟有些缺陷,就是無論引用的是什么類型的對象,它都返回object,這時就要用到instanceof來檢測某個對象是不是另一個對象的實例2013-10-10javascript少兒編程關(guān)于返回值的函數(shù)內(nèi)容
在本篇文章中我們給大家整理了兒童學(xué)習(xí)JS中關(guān)于返回值的函數(shù)的相關(guān)內(nèi)容知識點,對此有興趣的參考下。2018-05-05JavaScript那些不經(jīng)意間發(fā)生的數(shù)據(jù)類型自動轉(zhuǎn)換
JavaScript可以自由的進行數(shù)據(jù)類型轉(zhuǎn)換,但是更多的情況下,是由JavaScript自動轉(zhuǎn)換的。本文就將為大家詳細講解那些不經(jīng)意間發(fā)生的數(shù)據(jù)類型轉(zhuǎn)換,感興趣的同學(xué)可以了解一下2022-02-02js中g(shù)etBoundingClientRect( )方法案例詳解
這篇文章主要介紹了js中g(shù)etBoundingClientRect( )方法案例詳解,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細內(nèi)容,需要的朋友可以參考下2021-07-07四種參數(shù)傳遞的形式——URL,超鏈接,js,form表單
本文介紹了四種參數(shù)傳遞的形式,并給出了URL,超鏈接,js,form表單傳參方式,需要的朋友可以參考下2015-07-07