javascript實現(xiàn)計算器功能詳解流程
更新時間：2021年11月01日 11:17:27 作者：涼沫love
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單計算器小功能，只學書上的理論是遠遠不夠的，只有在實戰(zhàn)中才能獲得能力的提升，大家可以在本篇實例中查缺補漏，提升水平
1、計算器功能介紹
可以實現(xiàn)數(shù)據(jù)的加(+)，減(-)，乘(*)，除(/)，取余運算(%)，以及實現(xiàn)數(shù)據(jù)的刪除(Del)和清空功能(C)。
2、計算器頁面設(shè)計
1、導航欄部分
{
"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;//先記錄當前的op
var num=Number(this.data.num);//獲取當前的num數(shù)據(jù)
this.setData({op:e.target.dataset.val});//把按下的按鈕給變量op
if(this.isClear){//因為上面操作中有如果按了運算符，則isclear為true，在這里為了避免多次按加都會起作用，再return
return
}
this.isClear=true;//當用戶按了運算按鈕，再按數(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)文章
JavaScript學習筆記（二） js對象學習，學習js的朋友可以參考下。2011-10-10
下面小編就為大家?guī)硪黄獪\談javascript中的constructor。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
簡介JavaScript中g(shù)etUTCMonth()方法的使用
這篇文章主要介紹了簡介JavaScript中g(shù)etUTCMonth()方法的使用,是JS入門學習中的基礎(chǔ)知識,需要的朋友可以參考下2015-06-06
說說掌握JavaScript語言的思想前提想學習js的朋友可以看看
無論是公司的同事還是外界的程序員朋友們，大部分人對JavaScript的高級應用不甚了解，已有的知識架構(gòu)里會認為JavaScript僅僅是一門腳本語言，其作用是給頁面做一些錦上添花的效果，比如表單驗證等等。2009-04-04
javascript中FOREACH數(shù)組方法使用示例
本文給大家介紹的是Array.prototype.forEach()的使用方法示例，希望對大家學習javascript能夠有所幫助。2016-03-03
js創(chuàng)建jsonArray傳輸至后臺及后臺全面解析
下面小編就為大家?guī)硪黄猨s創(chuàng)建jsonArray傳輸至后臺及后臺全面解析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。2016-04-04
淺析四種常見的Javascript聲明循環(huán)變量的書寫方式
這篇文章主要介紹了四種常見的聲明循環(huán)變量的書寫方式,對其進行簡單的分析和比較，需要的朋友可以參考下2015-10-10
javascript基礎(chǔ)知識大集錦(二) 推薦收藏
正則表達式 call(),apply(),callee,caller,cookie方法，setInterval()，clearInterval(),setTimeout() ,clearTimeout()2011-01-01
Array對象方法參考...2006-10-10
這篇文章主要通過代碼實例說明了ExtJS如何自定義主題（theme）樣式,希望對大家有幫助2013-11-11